Div CSS表格无法正确呈现

Question

我创建了一个像布局一样的DIV + CSS样式表。 但是，第三列继续显示在前两列之下。 即使我使用宽度为33％（即总不到100％）的情况。

HTML标签如下：

        <div id="container">
            <div id="column1">
                Some Content for the first column.
            </div>
            <div id="column2">
                Some Content for the second column.
            </div>
            <div id="column3">
                Some Content for the third column.
            </div>
        </div>

CSS表包含：

    #column1 {
        float: left;
        width: 33%;
        border: solid;
    }

    #column2 {
        float: left;
        width: 34%;
        border: solid;
    }

    #column3 {
        float: left;
        width: 33%;
        border: solid;
    }

如何确保它们能在各种分辨率下正确呈现？

Answer 1

宽度的默认计算不考虑边框宽度。 通过添加以下CSS，您可以进行宽度计算，包括边框。

    .boxStyle {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

修改HTML以引用此新创建的类

        <div id="container">
            <div id="column1" class="boxStyle">
                Some Content for the first column.
            </div>
            <div id="column2" class="boxStyle">
                Some Content for the second column.
            </div>
            <div id="column3" class="boxStyle">
                Some Content for the third column.
            </div>
        </div>

Answer 2

我认为它正在发生，因为你的div宽度总和达到100％，这排除了边界的小但仍然存在的宽度。 您可以将宽度进一步减小1％以适应边框宽度。

检查一下

Answer 3

您还可以使用内联块的显示类型，这可以解决一些浮动项目的怪癖，例如必须清除它们。

需要注意的一点是，您需要删除div之间的任何空白区域。 您还可以更改垂直对齐以获得更多控制。

<div>....</div><div>
....
</div><div>
....
</div>

。

#container{
width:100%;
}
#column1,#column2,#column3{
display: inline-block;
vertical-align: top;
width:33.3%;
}

这里有更多链接： http ： //www.vanseodesign.com/css/inline-blocks/