倍精度の要素でグリッドを塗りつぶす

Question

他の要素の高さや幅の2倍のコンテナがいくつかあるダッシュボードで作業しています。

それはかなりまっすぐ進むこのような古き良きテーブルでこれをやっている：リスト項目が浮くと、しかし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を使用して、これをやってみたかったが、私は今のfloatベースのソリューションをsetlleます：

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>