css - div 相互堆叠的问题

Question

我在对齐 3 个 div 时遇到了一些问题。

http://jsfiddle.net/Lpprn/

我有一种强烈的感觉，它存在于语法中，但我终究无法弄明白。

#story-container {
    width: 700px;
    padding: 0px;
    margin: 0 auto;
}
#story-left {
    width: 300px;
    padding: 10px;
    padding-right: 0px;
    float: left;
    text-align: right;
    margin: 0;
    background-color: #000000;
}
#story-center {
    width: 100px;
    float: left;
    margin: 0;
    background-color: #ffffff;    
}
#story-right {
    width: 300px;
    padding: 10px;
    padding-left: 0px;
    float: left;
    text-align: left;
    margin: 0;
    background-color: #808080;

}

感谢您的帮助!

Answer 1

包含的元素加起来不超过父元素的宽度，700px。

这是因为填充被添加到子元素的宽度。

因此，300px + 10px + 100px + 10px + 300px ! = 700px

您要么必须从宽度中减去填充值，要么使用类似 box-sizing 的值，它改变了元素的盒子模型，从而导致它的 padding/border 属性被计算到它的 width/height.

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

border-box: The width and height properties include the padding and border, but not the margin.

From MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

我向每个元素添加了以下内容，但中间元素 #story-center 实际上不需要它，因为它目前没有任何填充。

jsFiddle example - 现在可用 _{-(添加红色背景以显示父容器)}

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;