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以引用此新创建的类</ p>

        <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％以适应边框宽度。

检查this

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/

Div CSS表格无法正确呈现

3 个答案: