使用雙高度元素填充網格

Question

我正在使用具有幾個容器的儀表板，這些容器是其他元素的高度或寬度的兩倍。

它非常直截了當具有良好的醇」表這樣做是這樣的：Fiddle

<table cellspacing="4"> 
    <tr> 
    <td rowspan="2"></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    <td rowspan="2"></td> 
    </tr> 
    <tr> 
    <td colspan="2"></td> 
    </tr> 
</table> 

然而，列表項浮動：左;讓容器按我期望的方式纏繞彼此似乎相當困難。

我應該只使用表中的例子，還是有一個乾淨的解決方案，而不需要一堆工作？ 我很幸運，只需要支持Chrome。

Answer 1

我其實是想做到這一點使用flexbox，但我會setlle了float基於解決方案現在：

section { 
 
display: block; 
 
width: 128px; 
 
padding: 4px 0 0 4px; 
 
background-color: rgb(191,191,191); 
 
} 
 

 
div { 
 
float: left; 
 
display: inline-block; 
 
width: 40px; 
 
height: 40px; 
 
margin: 0 2px 2px 0; 
 
background-color: rgb(0,0,0); 
 
vertical-align: top; 
 
} 
 

 
.x2 { 
 
width: 82px; 
 
} 
 

 
.y2 { 
 
height: 82px; 
 
} 
 

 
.right { 
 
float: right; 
 
margin: 0 4px 2px 0; 
 
} 
 

 
section::after { 
 
content: ''; 
 
display: block; 
 
width: 2px; 
 
height: 2px; 
 
clear: both; 
 
}

<section> 
 
<div class="y2"></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div class="y2 right"></div> 
 
<div class="x2"></div> 
 
</section>