Skip to content

Commit f18bcaf

Browse files
author
howcome
committed
adding example on spanning element
1 parent 6f25038 commit f18bcaf

1 file changed

Lines changed: 59 additions & 4 deletions

File tree

css-multicol/Overview.src.html

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -292,10 +292,6 @@ <h2>The multi-column model</h2>
292292
multi-column element is paginated, the height of each row is
293293
constrained by the page and the content continues in a new row of
294294
column boxes on the next page; a column box never splits across pages.
295-
The same effect occurs when a <em>spanning element</em> divides the
296-
multi-column element: the columns before the spanning element are
297-
balanced and shortened to fit their content. Content after the
298-
spanning element then flows into a new row of column boxes.
299295

300296

301297
<div class="example">
@@ -362,6 +358,65 @@ <h2>The multi-column model</h2>
362358
<div class=gap style="left: 325px"></div>
363359
</div>
364360

361+
362+
<p>The same effect occurs when a <em>spanning element</em> divides the
363+
multi-column element: the columns before the spanning element are
364+
balanced and shortened to fit their content. Content after the
365+
spanning element then flows into a new row of column boxes.
366+
367+
<div class="example">
368+
369+
<div class=cols>
370+
371+
<p>Ab cde fgh i jkl. Mno<br>
372+
pqr stu vw xyz. A bc<br>
373+
374+
<br><br>
375+
376+
M nop qrst uv wx yz.<br>
377+
Ab cde fgh i jkl. Mno<br>
378+
pqr stu vw xyz. A bc<br>
379+
def g hij klm nopqrs<br>
380+
tuv wxy z. Abc de fg<br>
381+
hi jklmno. Pqrstu vw<br>
382+
383+
384+
385+
<div class="col" style="left: 175px">
386+
<p>def g hij klm nopqrs<br>
387+
tuv wxy z. Abc de fg<br>
388+
<br><br>
389+
x yz. Abc def ghi jkl.<br>
390+
M nop qrst uv wx yz.<br>
391+
Ab cde fgh i jkl. Mno<br>
392+
pqr stu vw xyz. A bc<br>
393+
def g hij klm nopqrs<br>
394+
tuv wxy z. Abc de fg<br>
395+
396+
397+
</div>
398+
399+
<div class="col" style="left: 350px">
400+
<p>
401+
hi jklmno. Pqrstu vw<br>
402+
x yz. Abc def ghi jkl.<br>
403+
<br><br>
404+
hi jklmno. Pqrstu vw<br>
405+
x yz. Abc def ghi jkl.<br>
406+
M nop qrst uv wx yz.<br>
407+
Ab cde fgh i jkl. Mno<br>
408+
pqr stu vw xyz.
409+
410+
</div>
411+
412+
413+
<div class=rep style="width: 490px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An spanning element</div>
414+
<div class=gap style="left: 150px"></div>
415+
<div class=gap style="left: 325px"></div>
416+
</div>
417+
</div>
418+
419+
365420
<!--
366421
<p>To illustrate the effects of the various properties described in
367422
this specification, variations on a sample document will be used. Here

0 commit comments

Comments
 (0)