Html div标签未正确对齐_Html_Css_Css Tables

Html div标签未正确对齐

html css

Html div标签未正确对齐,html,css,css-tables,Html,Css,Css Tables,我发现div标签有一个奇怪的问题，实际上这些div标签是在一个容器中对齐和分组的，但是问题是我的代码很愚蠢 <html> <head> <style> body { padding: 0 2%; } #footer { width: 100 %; clear: both; border: 1px solid #CCC; } #footer .col_one {

我发现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>


身体{
填充：0.2%；
}
#页脚{
宽度：100%；
明确：两者皆有；
边框：1px实心#CCC；
}
#页脚。第一列{
浮动：左；
宽度：25%；
边框：1px实心#CCC；
}
#页脚。第二列{
浮动：左；
宽度：25%；
边框：1px实心#CCC；
}
#页脚，第三列{
浮动：左；
宽度：24%；
边框：1px实心#CCC；
}
#页脚第四列{
浮动：左；
宽度：25%；
边框：1px实心#CCC；
}
这里有东西
这里有东西
这里有东西
这里有东西

现在在

#footer.col_third

中，当我将宽度设置为24%时，它们按正确的顺序显示所有框，但我将其设置为25%，最后一个框刚好位于第一个框的下方，为什么？总页脚容器是100%，有四个div框，每个25%的宽度，我错了，希望你理解，并为糟糕的英语道歉

去掉边框，它们就会工作。浏览器会根据百分比计算每个div的宽度像素数。当添加额外像素（带边框）时，div的总宽度大于窗口宽度，需要向下移动

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

去掉边框，它们就会工作。浏览器会根据百分比计算每个div的宽度像素数。当添加额外像素（带边框）时，div的总宽度大于窗口宽度，需要向下移动

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

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

您可以通过在div中添加额外的div来解决此问题。外部div的宽度为25%，无边框。在内部div中，您可以指定边框，但没有明确的宽度，因此它将填充其父级：

我随意地修改了选择器，在这些div上放置了单独的类：

col one

，而不是

col_one

。这样，您可以对所有列使用

.col

选择器，如果需要设置特定列的样式，则可以使用

.col.one

选择器。：）