关于 CSS 中的浮点数

Question

我在使用css中的"float"时遇到了一些麻烦。 我有一个宽度为 960px 的包装器div。我想在其中添加 5 个宽度为 960/5 = 192px 的子区。这就是我得到的： https://i.stack.imgur.com/R6bsw.png

这是我的代码行。谁能告诉我他们有什么问题？

.HTML

#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}

<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</section>

Answer 1

对于每个子框，您有 1px 的边框，依次加起来就是总宽度。

因此，如果您希望所有子框都包含在一行上，容器的宽度应为 (192+1+1(*5 = 970，而不是 960。您还可以隐含边框或使用 190 (190+1+1=192( 的子框宽度

此外，为容器保留 1px 的可用宽度空间也有帮助

Answer 2

关于box-sizing:border-box：

宽度和高度属性(以及最小/最大属性(包括内容、填充和边框，但不包括边距。

对于修复它：

因此，您必须使用box-sizing:border-box;因为.box宽度 (192px( 包括.box边框宽度(左边框为 1px，右边框为 1px(。

如果你不添加box-sizing:border-box，它将在每个.box中添加2px(左边框为1px，右边框为1px(，换句话说，宽度.box得到宽度(192px + 2px = 194px(。

* {
box-sizing:border-box;
}

* {
box-sizing: border-box;
}
.container {
width: 960px;
}

#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}

<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>

Answer 3

您的 1px 边框将添加到框的宽度空间中。

在 CSS 中设置：

* {box-sizing: border-box; }

顺便说一句，您还可以使用百分比宽度来欢迎自己进入响应式时代;)

.box {
float: left;
box-sizing: border-box;
background: aquamarine;
border: 1px solid green;
width: 20%;
height: 100px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

其中box-sizing设置为border-box用于将边框、填充和宽度考虑到目标元素的内框模型宽度中。

如果您计划支持 IE7(目前不需要(，则必须手动从元素width中减去border-width。