OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
3 .multicol { | |
4 width: 500px; | |
5 height: 200px; | |
6 border: 3px solid black; | |
7 -webkit-column-gap: 10px; | |
8 -webkit-column-width: 160px; | |
mstensho (USE GERRIT)
2014/10/23 08:31:14
I'd just say -webkit-column-count:3 (or just -webk
andersr
2014/10/24 09:40:07
Done.
| |
9 line-height: 20px; | |
10 } | |
11 .left, .right { | |
12 padding: 10px 0; | |
13 width: 40px; | |
14 text-align: center; | |
15 box-sizing: border-box; | |
16 } | |
17 .left { float: left; } | |
18 .right { float: right; } | |
19 .tall { height: 220px; } | |
20 .xtall { height: 420px; } | |
21 .blue1 { background-color: skyblue; } | |
22 .blue2 { background-color: dodgerblue; } | |
23 .blue3 { background-color: steelblue; } | |
24 </style> | |
25 | |
26 <p>There should be three tall floats, each of which should extend | |
27 into the next column (F2, F3) or into all columns (F1).</p> | |
28 <div class="multicol"> | |
29 First<br> | |
30 First<br> | |
31 <div class="right tall blue1">F2</div> | |
32 First<br> | |
33 First<br> | |
34 <div class="left xtall blue2">F1</div> | |
35 First<br> | |
36 First<br> | |
37 First<br> | |
38 First<br> | |
39 First<br> | |
40 First<br> | |
41 | |
42 Second<br> | |
43 Second<br> | |
44 <div class="left tall blue3">F3</div> | |
45 Second<br> | |
46 Second<br> | |
47 Second<br> | |
48 Second<br> | |
49 Second<br> | |
50 Second<br> | |
51 Second<br> | |
52 | |
53 Third<br> | |
54 Third<br> | |
55 Third<br> | |
56 Third<br> | |
57 Third<br> | |
58 Third<br> | |
59 Third<br> | |
60 Third<br> | |
61 Third<br> | |
62 Third<br> | |
63 </div> | |
OLD | NEW |