Question

我正在尝试使用<div>为每个输出三列。

现在左边我的div正确排列，即使是中间的div，但是当我试图向右倾斜时，它只是剪下来。

CSS

/* left div */
 #left-sidebar, #right-sidebar {
    width:15%;
    height:700px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
}

/* middle div */
 #mid-content {
    width:75%;
    padding-left: 30px;
    padding-top: 20px;
}

/* right div */
 #right-sidebar {
    float:right;
}

Answer 1

首先，你的元素总共增加了105％。其次，您已经为浮动元素添加了填充，其宽度指定为％，这不是一个好主意。看http://www.w3schools.com/css/css_boxmodel.asp

以下是解决方案http://jsfiddle.net/Ru6CL/

#left-sidebar,
#right-sidebar,
#mid-content {
    float:left;
}

#left-sidebar,
#right-sidebar {
    width: 15%;
    background-color: red;
}
#mid-content {
    width: 70%;
    background-color: blue;
}

请记得使用 clear: both;

Answer 2

如果您将值更改为最多100％，会发生什么？目前，75％，15％和15％的比例高达105％。

Answer 3

这是因为根据CSS box model，元素的大小是它的宽度，边框和填充的总和 - 因此你的内容+填充超过了100％。

为了解决这个问题，只需添加

即可

box-sizing: border-box;

到您的列，它将重新计算必要的宽度以及上面考虑的内容。

此外，您可以考虑将元素浮动到相同的方向，即向左，因为框大小的东西可能会被抛弃。

我在这里做了一个工作示例：http://jsfiddle.net/v6peK/

CSS显示三列内容

3 个答案: