css - CSS显示三列内容

Question

我正在尝试使用<div>for each 获得三列输出。

现在我左边的 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

发生这种情况是因为根据 CSS的框模型，元素的大小是其宽度、边框和填充的总和，因此 - 你的内容+填充超过 100%。

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

box-sizing: border-box;

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

此外，您可能会考虑将元素浮动到相同的方向，即向左，因为否则可能会抛出 box-sizing 的东西。

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

Answer 3

如果您将这些值更改为加起来为 100%，会发生什么情况？现在，75%、15% 和 15% 加起来是 105%。