您不适合 4 个 div 的原因是因为您的显示设置是inline-block
. 这会在您无法控制的元素之间创建一些填充。用浮点数替换它,一切都解决了:
nav {
display: block; <--this changed from inline-block
float: left; <--this line added
vertical-align: top;
margin-bottom: 4px;
overflow: hidden;
box-shadow: 0 0 2px #888;
}
现在这些 div 很难相互对抗,正好占用了 100% 的宽度。如果您想要两者之间的保证金,则需要将其考虑在内,即:
nav {
display: block;
float: left;
vertical-align: top;
margin-bottom: 4px;
overflow: hidden;
box-shadow: 0 0 2px #888;
margin-left: 0.5%;
margin-right: 0.5%;
}
由于我添加了 1% 的边距,您可以将宽度调整为 24% 以进行补偿。如果您不想要左右两边的半边距,您将不得不使用:last
伪类来获得创意,或者向其添加最后一列类。
至于问题的另一部分,我怀疑除非您重组代码,否则它们将始终排在顶部(我可能是错的)。如果你知道总会有 4 个,你可以通过重新排序 div 来解决这个问题:
<div class='container-col'>
<div id='col1'></div>
<div id='col5'></div>
</div>
<div class='container-col'>
<div id='col2'></div>
<div id='col6'></div>
</div>
<div class='container-col'>
<div id='col3'></div>
<div id='col7'></div>
</div>
<div class='container-col'>
<div id='col4'></div>
<div id='col8'></div>
</div>
CSS:
.container-col {
float: left;
}
所以现在我们有 4 个并排浮动的垂直列,并且 div 将垂直堆叠,它们之间没有空间。这是一个显示结果的小提琴,它也保留了边距。