Question

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

我对语法有强烈的感觉，但我不能为我的生活弄明白。

#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。

box-sizing CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。

border-box ：width和height属性包括填充和边框，但不包括边距。

来自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;

div堆叠在一起的问题

1 个答案: