grid-placement-auto-col-sparse-001-ref.html (2872B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style type="text/css"> 6 .grid { 7 height: 60px; 8 border: 1px solid green; 9 position: relative; 10 font-size: 12px; 11 } 12 13 span { 14 position: absolute; 15 background: lime; 16 border: 1px solid black; 17 box-sizing: border-box; 18 width: 20px; 19 height: 20px; 20 } 21 22 .test1 .a { 23 top: 0; 24 left: 20px; 25 width: 20px; 26 height: 20px; 27 } 28 .test1 .b { 29 top: 20px; 30 left: 20px; 31 width: 60px; 32 height: 20px; 33 } 34 .test1 .c { 35 top: 0; 36 left: 80px; 37 width: 60px; 38 height: 40px; 39 } 40 .test1 .d { 41 top: 40px; 42 left: 80px; 43 } 44 .test1 .d2 { 45 top: 40px; 46 left: 100px; 47 } 48 .test1 .e { 49 top: 20px; 50 left: 140px; 51 } 52 53 .test2 .a { 54 top: 0; 55 left: 20px; 56 width: 60px; 57 height: 20px; 58 } 59 .test2 .b { 60 top: 20px; 61 left: 20px; 62 width: 20px; 63 height: 20px; 64 } 65 .test2 .c { 66 top: 0; 67 left: 80px; 68 width: 60px; 69 height: 40px; 70 } 71 .test2 .d { 72 top: 40px; 73 left: 80px; 74 } 75 .test2 .d2 { 76 top: 40px; 77 left: 100px; 78 } 79 .test2 .e { 80 top: 20px; 81 left: 140px; 82 } 83 84 .test3 .a { 85 top: 0; 86 left: 0; 87 width: 60px; 88 height: 40px; 89 } 90 .test3 .b { 91 top: 40px; 92 left: 20px; 93 width: 60px; 94 height: 20px; 95 } 96 .test3 .c { 97 top: 0px; 98 left: 60px; 99 width: 60px; 100 height: 40px; 101 } 102 .test3 .d { top: 40px; left:80px; } 103 .test3 .e { 104 top: 20px; 105 left: 120px; 106 } 107 .test3 .d2 { 108 top: 40px; 109 left: 100px; 110 } 111 112 .test4 .c { 113 top: 0; 114 left: 0px; 115 width: 60px; 116 height: 40px; 117 } 118 .test4 .d { top: 40px; } 119 .test4 .e { 120 top: 20px; 121 left: 60px; 122 } 123 .test4 .d2 { 124 top: 40px; 125 left: 20px; 126 } 127 128 .test5 .c { 129 top: 20px; 130 left: 0; 131 width: 60px; 132 height: 20px; 133 } 134 .test5 .d { top: 40px; } 135 .test5 .e { 136 top: 20px; 137 left: 60px; 138 } 139 .test5 .d2 { 140 top: 0px; 141 left: 20px; 142 } 143 144 .test6 { left: 140px; top: 20px;} 145 .test6d2 { 146 top: 20px; 147 left: 160px; 148 } 149 .test6e { 150 top: 20px; 151 left: 180px; 152 } 153 </style> 154 </head> 155 <body> 156 157 <div class="grid test1"> 158 <span class="a">a</span> 159 <span class="b">b</span> 160 <span class="c">c</span> 161 <span class="d">d</span> 162 <span class="d2">D</span> 163 <span class="e">e</span> 164 </div> 165 166 <div class="grid test2"> 167 <span class="a">a</span> 168 <span class="b">b</span> 169 <span class="c">c</span> 170 <span class="d">d</span> 171 <span class="d2">D</span> 172 <span class="e">e</span> 173 </div> 174 175 <div class="grid test3"> 176 <span class="a">a</span> 177 <span class="b">b</span> 178 <span class="c">c</span> 179 <span class="d">d</span> 180 <span class="d2">D</span> 181 <span class="e">e</span> 182 </div> 183 184 <div class="grid test4"> 185 <span class="c">c</span> 186 <span class="d">d</span> 187 <span class="d2">D</span> 188 <span class="e">e</span> 189 </div> 190 191 <div class="grid test5"> 192 <span class="c">c</span> 193 <span class="d">d</span> 194 <span class="d2">D</span> 195 <span class="e">e</span> 196 </div> 197 198 <div class="grid test1"> 199 <span class="a">a</span> 200 <span class="b">b</span> 201 <span class="c">c</span> 202 <span class="test6">d</span> 203 <span class="test6d2">D</span> 204 <span class="test6e">e</span> 205 </div> 206 207 </body> 208 </html>