如何在给div浮动的同时填充空白区域？

Question

我有4个不同高度的div，但是所有四个都有左浮动选项。这里出现的问题是第一个div高度与第二个div相比较低，而第三个div出现在第二行，它在第一个和第二个之间有空格。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是浮动div的基本行为，并且正确呈现页面布局。

要“填充”创建容器div所需的空白空间，它将像“列”一样，包含第三个和第一个div。不要忘记添加css属性 box-sizing：border-box; ，以便无边界div的宽度和高度计算与带边框的div相同（特别是当使用百分比时） div widths）。

.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>