我在 div 标签上遇到了一个奇怪的问题，实际上这些 div 标签是对齐的并分组在一个容器中，但这里真正愚蠢的问题是我的代码
<html>
<head>
<style>
body {
padding: 0 2%;
}
#footer {
width: 100 %;
clear: both;
border: 1px solid #CCC;
}
#footer .col_one {
float: left;
width: 25%;
border: 1px solid #CCC;
}
#footer .col_two {
float: left;
width: 25%;
border: 1px solid #CCC;
}
#footer .col_three {
float: left;
width: 24%;
border: 1px solid #CCC;
}
#footer .col_four {
float: left;
width: 25%;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<div id="footer">
<div class="col_one">
something here
</div>
<div class="col_two">
something here
</div>
<div class="col_three">
something here
</div>
<div class="col_four">
something here
</div>
<div style="clear: both">
</div>
</div>
</body>
</html>
现在在 #footer .col_three 中，当我将宽度设置为 24% 时，它们会以正确的顺序显示所有框，但随后我将其设置为 25%，最后一个就在第一个框的下方，为什么是这样吗？总的页脚容器是 100%，有四个 div 框，每个宽度为 25%，我错了，希望你能理解，抱歉英语不好。
最佳答案
那是因为你设置的宽度，是内容的宽度，不包括padding、margin和borders。所以总宽度是 100% + 8px(对于 4 个 div 每边的 1px 边框)。因此它不适合。
您可以通过在 div 中放置额外的 div 来解决这个问题。你制作的外层 div 宽度为 25%，没有边框。内部 div，你可以给一个边框，但没有明确的宽度，所以它会填充它的父级:
http://jsfiddle.net/GolezTrol/fm7LV/1/
我通过在这些 div 上放置单独的类来稍微修改选择器:col one 而不是 col_one。这样，您可以对所有列使用 .col 选择器，并在需要为特定列设置样式时使用 .col.one 选择器。 :)
关于html - div 标签未正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7797608/