div 标签未正确对齐
我在 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_third 中，当我设置宽度时到 24% 时，它们会按正确的顺序显示所有框，但后来我将其设置为 25%，最后一个框正好位于第一个框下方，为什么会这样？总页脚容器为 100%，有四个 div 框，每个宽度为 25%，我哪里错了，希望您能理解，并对英语不好表示歉意。
I get a weird problem with the div tags actually these div tags are aligned and grouped in a single container but the problem something really stupid here is my code
<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>
Now in the #footer .col_three when I make the width to 24% they display all the boxes in right order but then I make it 25% the last one goes just below the first box why is that so? The total footer container is 100% and there are four div boxes made 25% each in width where am I wrong hope you understand and sorry for bad english.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是因为您设置的宽度是内容的宽度，不包括填充、边距和边框。所以总宽度是 100% + 8px（4 个 div 每边 1px 边框）。因此它不会适合。
您可以通过在 div 中添加额外的 div 来解决此问题。您制作的外部 div 宽度为 25%，无边框。内部 div，您可以给出边框，但没有明确的宽度，因此它将填充其父级：
http: //jsfiddle.net/GolezTrol/fm7LV/1/
我冒昧地通过在这些 div 上放置单独的类来稍微修改选择器：
col one而不是col_one。这样，您可以对所有列使用.col选择器，并在需要设置特定列样式时使用.col.one选择器。 :)That's because the width you set, is the width of the content, excluding padding, margin and borders. So the total width is 100% + 8px (for 1px borders on each side of 4 divs). Therefor it won't fit.
You can solve this by putting extra divs in the div. The outer div you make 25% wide without borders. The inner div, you can give a border, but no explicit width, so it will fill its parent:
http://jsfiddle.net/GolezTrol/fm7LV/1/
I took the liberty of modifying the selectors a little by putting separate classes on those divs:
col oneinstead ofcol_one. That way, you can use the.colselector for all columns and the.col.oneselector in case you need to style a specific column. :)去掉边框，它们应该可以工作。浏览器根据百分比计算每个 div 的宽度应有的像素数。当您添加额外的像素（带有边框）时，div 的总宽度大于窗口宽度，并且它们需要向下移动
Take out the border and they should work.The browser calculates the amount of pixels each div should be in width from the percentages. When you add extra pixels (with a border) the total width of the divs is then more then the window width and they need to shift down