如何在给 div 浮动的同时填充空白区域？ [复制]答案

【问题标题】：How to fill the empty area while giving div float? [duplicate]如何在给 div 浮动的同时填充空白区域？ [复制]
【发布时间】：2017-07-13 08:13:37
【问题描述】：

我有 4 个高度不同的 div，但所有四个都有向左浮动选项。这里的问题是，第一个 div 的高度比第二个 div 低，而第三个 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>

【问题讨论】：

出现错误：<div class="hyper" style="height:183.76666pxwidth:69.96%">1</div> 改成<div class="hyper" style="height:183.76666px;width:69.96%">1</div>

标签： html css

【解决方案1】：

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

要“填充”您需要创建一个容器 div 的空白空间，它的作用类似于“列”并包含第三个和第一个 div。不要忘记添加 css 属性 box-sizing: 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>

【讨论】：