いくつかの列スタイルの div を行でラップしようとしています。次に、overflow:hidden; を適用します。行に移動して、次の行にある浮動列を整列させます。
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
<div class="row">
<div class="col">Column 3</div>
<div class="col">Column 4</div>
</div>
<div class="row">
<div class="col">Column 5</div>
<div class="col">Column 6</div>
</div>
次に使用します。
.row{ overflow:hidden; }
.col{
width:50%;
float:left;
}
問題は、より大きな画面で行の div を効果的に移動して、3 つの列を表示できるようにすることです。
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
<div class="row">
<div class="col">Column 4</div>
<div class="col">Column 5</div>
<div class="col">Column 6</div>
</div>
そして使用:
.row{ overflow:hidden; }
.col{
width:33%;
float:left;
}
これは CSS では実行できないことはわかっていますが、列をラップしたり、使用できる CSS を使用してこの効果を得たりする他の方法はありますか? 私が思いついた最高のものは、余分な要素を使用したかなり醜いバージョンです:
http://codepen.io/djave_co/pen/EIHzt
画面のサイズを変更すると、その動作を確認できますが、あまりきちんとした意味ではありません。