我制作了四个 div,每个 25% 并将它们 float 到左侧。现在,当我为这些 div 中的每一个提供填充时,最后一个 div 不能包含在一行中并向下移动,因为这些 div 中的每一个都占用了比给定的 25% 额外的空间,如下所示:
<div class="container">
<div class="abc">
</div>
<div class="abc">
</div>
<div class="abc">
</div>
<div class="abc">
</div>
</div>
.container {
width: 100%;
height: auto;
}
.abc {
width: 25%;
float: left;
padding: 15px;
}
但是当我查看 bootstrap div 时,让我们说一下 col-lg-4
div。 col-lg-4
div 占 33.33%,左右两边也有 15px 的内边距,但仍适契约(Contract)一行。我希望我的 div 以同样的方式运行。我在这里错过了什么?
最佳答案
在 .abc
div 上使用 box-sizing: border-box;
。这将导致宽度(和高度)计算包括边框和填充。
关于html - 填充占用了额外的空间,我希望我的 div 像 bootstrap div 一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36505754/