| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 .mc { box-sizing:border-box; padding:0 5px; } |
| 4 .column { float:left; width:calc(50% - 8px); height:100%; } |
| 5 .gap { float:left; width:16px; height:100%; } |
| 6 .outer { background:lime; } |
| 7 .middle { background:salmon; } |
| 8 .inner { background:papayawhip; } |
| 9 .outer > .gap::before { display:block; margin:auto; border-left:8px solid; w
idth:0; height:100%; content:""; } |
| 10 .middle > .gap::before { display:block; margin:auto; border-left:4px solid;
width:0; height:100%; content:""; } |
| 11 .inner > .gap::before { display:block; margin:auto; border-left:2px solid; w
idth:0; height:100%; content:""; } |
| 12 </style> |
| 13 <p>Below there should be a multicol inside a multicol inside a multicol.</p> |
| 14 <p>The innermost multicol (papayawhip, thin column rules) should have a total of
eight columns and |
| 15 consist of twelve lines. Each line should have a letter, from A to L, ascend
ingly.</p> |
| 16 <p>The middle multicol (salmon, medium column rules) should have four columns. T
he first line in the |
| 17 first line should say "middle first". Then comes the inner multicol, followe
d by the last line |
| 18 in the last column, which should say "middle last".</p> |
| 19 <p>The outermost multicol (lime, thick column rules) should have two columns. Th
e first line in the |
| 20 first column should say "outer first". Then comes the middle (and inner) mul
ticol, followed by |
| 21 the last line in the last column, which should say "outer last".</p> |
| 22 <p>Rules should be drawn between columns in the same row.</p> |
| 23 <div style="line-height:2em; width:572px;"> |
| 24 <div class="mc outer" style="height:6em;"> |
| 25 <div class="column"> |
| 26 outer first |
| 27 <div class="mc middle" style="height:4em;"> |
| 28 <div class="column"> |
| 29 middle first |
| 30 <div class="mc inner" style="height:2em;"> |
| 31 <div class="column"> |
| 32 A<br> |
| 33 </div> |
| 34 <div class="gap"></div> |
| 35 <div class="column"> |
| 36 B<br> |
| 37 </div> |
| 38 </div> |
| 39 </div> |
| 40 <div class="gap"></div> |
| 41 <div class="column"> |
| 42 <div class="mc inner" style="height:4em;"> |
| 43 <div class="column"> |
| 44 C<br> |
| 45 D<br> |
| 46 </div> |
| 47 <div class="gap"></div> |
| 48 <div class="column"> |
| 49 E<br> |
| 50 F<br> |
| 51 </div> |
| 52 </div> |
| 53 </div> |
| 54 </div> |
| 55 </div> |
| 56 <div class="gap"></div> |
| 57 <div class="column"> |
| 58 <div class="mc middle" style="height:4em;"> |
| 59 <div class="column"> |
| 60 <div class="mc inner" style="height:4em;"> |
| 61 <div class="column"> |
| 62 G<br> |
| 63 H<br> |
| 64 </div> |
| 65 <div class="gap"></div> |
| 66 <div class="column"> |
| 67 I<br> |
| 68 J<br> |
| 69 </div> |
| 70 </div> |
| 71 </div> |
| 72 <div class="gap"></div> |
| 73 <div class="column"> |
| 74 <div class="mc inner" style="height:2em;"> |
| 75 <div class="column"> |
| 76 K<br> |
| 77 </div> |
| 78 <div class="gap"></div> |
| 79 <div class="column"> |
| 80 L<br> |
| 81 </div> |
| 82 </div> |
| 83 middle last |
| 84 </div> |
| 85 </div> |
| 86 outer last |
| 87 </div> |
| 88 </div> |
| 89 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1292163002:
Initial support for nested multicol layout. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk