div floatを与えて空の領域を埋める方法は？

Question

私は様々な高さの4つのdivを持っていますが、4つのすべてがfloat leftオプションを持っています。ここで問題は、最初のdivの高さは2番目のdivに比べて低く、3番目のdivは2番目の行にあり、1番目と2番目のdivの間にスペースがあるということです。

.hyper { 
 
    float: left; 
 
    border: 1px solid #CCC; 
 
    text-align: center; 
 
}

<div class="preview"> 
 
<div class="hyper" style="height:97.76666px;width:29.90%">0</div> 
 
<div class="hyper" style="height:183.76666pxwidth:69.96%">1</div> 
 
<div class="hyper" style="height:97.76666px;width:29.90%">2</div> 
 
<div class="hyper" style="height:97.76666px;width:69.96%">3</div></div>

Answer 1

これは、フローティングのdivの基本的な動作であり、ページレイアウトの正確なレンダリングです。

空のスペースを「塗りつぶす」には、コンテナdivを作成する必要があります。このコンテナdivは、「列」のように動作し、3番目と1番目のdivの両方を含みます。 CSSのプロパティを追加することを忘れないでくださいボックスサイズ：border-box;のように、境界線のないdivの幅と高さの計算は、境界線を持つdivの場合と同じになります（特に、div幅のパーセンテージを使用する場合）。

.hyper { 
 
    float: left; 
 
    border: 1px solid #CCC; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
} 
 
.hyperColumn { 
 
    float: left; 
 
    text-align: center; 
 
}

<div class="preview"> 
 
<div class="hyperColumn" style="height:180px;width:30%"> 
 
    <div class="hyper" style="height:90px;width:100%">1</div> 
 
    <div class="hyper" style="height:90px;width:100%">3</div> 
 
</div> 
 
<div class="hyper" style="height:180px;width:70%">2</div> 
 
<div class="hyper" style="height:90px;width:100%">4</div></div>