Skip to content

Commit 77aef45

Browse files
committed
*** empty log message ***
1 parent d2fbd09 commit 77aef45

1 file changed

Lines changed: 9 additions & 7 deletions

File tree

css3-gcpm/Overview.src.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2646,12 +2646,15 @@ <h2>Page floats</h2>
26462646

26472647
<img alt="sample rendering" src=regions.png>
26482648

2649+
<p>In this example, a commonly used newspaper layout is easily described:
2650+
26492651
<pre>
2650-
body { columns: 3 }
2651-
img.A { column-span: 2; width: 100% }
2652-
.one { column-span: 2 }
2652+
body { columns: 3 }
2653+
img.A { column-span: 2; width: 100% } /* image spans two columns */
2654+
.one { column-span: 2 } /* lead paragraph spans two columns */
26532655
</pre>
26542656

2657+
26552658
</div>
26562659

26572660

@@ -3222,16 +3225,15 @@ <h3>Turning columns into regions</h3>
32223225
<div class=example>
32233226
<img alt="sample rendering" src=regions.png>
32243227

3225-
<p>In this example, the multicol layout is changed so that the image (which appears first in the markup) spans two columns and is floated to the top, thereby escaping its natural column. The first column, which holds the start of the textual content is also floated to the top, spanning two columns, and therefore ends up just under the image. Du to the 'visibility: collapse' setting on the first column, the second column will move into its space.
3228+
<p>In this example, the multicol layout is changed so that the image (which appears first in the markup) spans two columns and is floated to the top, thereby escaping its natural column. The first column, which holds the start of the textual content is also floated to the top, spanning two columns, and therefore ends up just under the image. When the first column/region is floated away, the second column will move into its space.
32263229

32273230
<pre>
32283231
article { columns: 3 }
32293232
img { column-span: 2; width: 100%; float: top }
3230-
article::column(1) { /* selects column 1 */
3233+
article::region(1) { /* selects column 1 */
32313234
column-span: 2;
32323235
float: top;
3233-
visibility: collapse; /* so that column 2 moves in */
3234-
height: 3em; /* or something */
3236+
height: 3em; /* sets preferred height of region */
32353237
}
32363238

32373239
&lt;article>

0 commit comments

Comments
 (0)