Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
1 <!DOCTYPE html>
2 <html><head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <title>616722-1</title>
6 <style type="text/css">
7 body,html { margin:0;padding: 10px;}
8 p { margin: 0; background:pink; }
9 .columns {
10 -webkit-column-count: 1;
11 -moz-column-count: 1;
12 column-count: 1;
13 background-color:lime;
14 margin: 0em;
15 border: 1px solid black;
16 }
17 .no-border {
18 border-width:0;
19 }
20 </style>
21 </head>
22 <body>
23 <div class="columns">
24 <div style="padding:10px 0 3px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
25 </div>
26 <div class="columns">
27 <div style="padding:3px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
28 </div>
29 <div class="columns">
30 <div style="padding:10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
31 </div>
32 <div class="columns">
33 <div style="padding:20px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
34 </div>
35 <div class="columns">
36 <div style="padding:20px 0 0 0"></div>
37 </div>
39 <div class="columns no-border">
40 <div style="padding:10px 0 3px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
41 </div>
42 <div class="columns no-border">
43 <div style="padding:3px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
44 </div>
45 <div class="columns no-border">
46 <div style="padding:10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
47 </div>
48 <div class="columns no-border">
49 <div style="padding:20px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
50 </div>
51 <div class="columns no-border">
52 <div style="padding:20px 0 0 0"></div>
53 </div>
54 <!--
55 <div class="columns no-border" style="margin-bottom:3px">
56 <div><p>The quick brown fox jumps over the lazy dog.</p></div>
57 </div>
58 <div class="columns no-border" style="margin-top:3px">
59 <div><p>The quick brown fox jumps over the lazy dog.</p></div>
60 </div>
61 <div class="columns no-border">
62 <div><p>The quick brown fox jumps over the lazy dog.</p></div>
63 </div>
64 <div class="columns no-border" style="margin-top:20px">
65 <div><p>The quick brown fox jumps over the lazy dog.</p></div>
66 </div>
67 <div class="columns no-border">
68 <div></div>
69 </div>
70 -->
71 </body></html>