grid-item-sizing-percent-001-ref.html (3414B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <title>Reference 001</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435"> 9 <meta charset="utf-8"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 position:relative; 15 background-color: grey; 16 width: 173px; 17 height: 53px; 18 } 19 20 .item { 21 position: absolute; 22 background: lime; 23 background-clip: content-box; 24 } 25 #abs > div div { 26 position: absolute; 27 } 28 .pbox { 29 box-sizing: border-box; 30 } 31 .p { padding:2px 3px; } 32 .m { margin:2px 3px; } 33 .c1.p,.c2.p { padding:6px 9px; } 34 .c1.m,.c2.m { margin:6px 9px; } 35 .b { border:solid black; } 36 37 #t1 { width:50px; height: 20px; } 38 #t2 { width:50px; height: 20px; } 39 #t0 { width:60px; height: 30px; } 40 #t3 { width:60px; height: 30px; } 41 #t4 { width:150px; height: 50px; } 42 #t5 { width:50px; height: 20px; } 43 #t6 { width:50px; height: 20px; } 44 #t7 { width:60px; height: 30px; } 45 #t8 { width:150px; height: 50px; } 46 #t9 { width:50px; height: 20px; } 47 #tA { width:60px; height: 30px; } 48 #tB { width:150px; height: 50px; } 49 #tC { width:50px; height: 20px; } 50 #tD { width:50px; height: 20px; } 51 #tE { width:150px; height: 50px; } 52 53 </style> 54 </head> 55 <body> 56 57 <div style="float:left"> 58 <div class="grid"><div id="t1" class="item"></div></div> 59 <div class="grid"><div id="t2" class="item pbox p"></div></div> 60 <div class="grid"><div id="t0" class="item c1 p"></div></div> 61 <div class="grid"><div id="t3" class="item c1 pbox p"></div></div> 62 <div class="grid"><div id="t4" class="item c2 pbox p"></div></div> 63 <div class="grid"><div id="t5" class="item pbox b"></div></div> 64 <div class="grid"><div id="t6" class="item pbox p b"></div></div> 65 <div class="grid"><div id="t7" class="item c1 pbox p b"></div></div> 66 <div class="grid"><div id="t8" class="item c2 pbox p b"></div></div> 67 <div class="grid"><div id="t9" class="item pbox m"></div></div> 68 <div class="grid"><div id="tA" class="item c1 pbox m"></div></div> 69 <div class="grid"><div id="tB" class="item c2 pbox m"></div></div> 70 <div class="grid"><div id="tC" class="item pbox p m"></div></div> 71 <div class="grid"><div id="tD" class="item pbox p b m"></div></div> 72 <div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div> 73 </div> 74 75 <div id="abs" style="float:left"> 76 <div class="grid"><div id="t1" class="item"></div></div> 77 <div class="grid"><div id="t2" class="item pbox p"></div></div> 78 <div class="grid"><div id="t0" class="item c1 p"></div></div> 79 <div class="grid"><div id="t3" class="item c1 pbox p"></div></div> 80 <div class="grid"><div id="t4" class="item c2 pbox p"></div></div> 81 <div class="grid"><div id="t5" class="item pbox b"></div></div> 82 <div class="grid"><div id="t6" class="item pbox p b"></div></div> 83 <div class="grid"><div id="t7" class="item c1 pbox p b"></div></div> 84 <div class="grid"><div id="t8" class="item c2 pbox p b"></div></div> 85 <div class="grid"><div id="t9" class="item pbox m"></div></div> 86 <div class="grid"><div id="tA" class="item c1 pbox m"></div></div> 87 <div class="grid"><div id="tB" class="item c2 pbox m"></div></div> 88 <div class="grid"><div id="tC" class="item pbox p m"></div></div> 89 <div class="grid"><div id="tD" class="item pbox p b m"></div></div> 90 <div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div> 91 </div> 92 93 </body> 94 </html>