Question

我得到一个奇怪的问题，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">
            &nbsp; something here
        </div>
        <div class="col_two">
            &nbsp; something here
        </div>
        <div class="col_three">
            &nbsp; something here
        </div>
        <div class="col_four">
            &nbsp; something here
        </div>
        <div style="clear: both">
        </div>
    </div>
</body>
</html>

现在在#footer .col_three当我将宽度设置为24％时，它们会以正确的顺序显示所有框，但是我将它设为25％，最后一个框放在第一个框的正下方为什么会这样？总页脚容器是100％，并且有四个div盒，宽度各占25％，我错了希望你理解并抱歉英语不好。

Answer 1

这是因为您设置的宽度是内容的宽度，不包括填充，边距和边框。因此总宽度为100％+ 8px（4个div的每边1px边框）。因此它不合适。

你可以通过在div中添加额外的div来解决这个问题。外部div使你的边界宽25％。内部div，你可以给一个边框，但没有明确的宽度，所以它将填充它的父：

http://jsfiddle.net/GolezTrol/fm7LV/1/

我冒昧地通过在这些div上放置单独的类来稍微修改选择器：col one而不是col_one。这样，您可以对所有列使用.col选择器，并在需要设置特定列样式时使用.col.one选择器。：）

Answer 2

取出边框，它们应该可以工作。浏览器根据百分比计算每个div应该在宽度上的像素数量。当您添加额外的像素（带边框）时，div的总宽度将超过窗口宽度，并且需要向下移动

#footer{
    width: 100 %;
    clear: both;
}
#footer .col_one,.col_two,.col_three,.col_four{
    width:25%;
    float:left;
}

div标签未正确对齐

2 个答案: