Question

我有以下要素：

<body>
    <div id="container">
        <div id="sidebar1"></div>
        <div id="content">
            <h3>Lorem ipsum</h3> 
            <p>Whatnot.</p>
        </div>
        <div id="sidebar2"></div>
    </div>
</body>

遵循这种风格：

/* ~~ this fixed width container surrounds all other divs~~ */
 #container {
    width: 960px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}
#sidebar1 {
    float: left;
    width: 180px;
    /*border: 2px solid black;*/
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}
#content {
    padding: 10px 0;
    width: 600px;
    float: left;
}
#sidebar2 {
    float: left;
    width: 180px;
    /*border: 2px solid black;*/
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}

我正在尝试实现此布局：http://jsfiddle.net/QnRe4/

但是一旦我取消评论边界，就会变成这样：http://jsfiddle.net/FZxPQ/

**解决了**

边框宽度被添加到每个元素的总宽度中，使得它们太宽而无法容纳在容器中。从每列的宽度中删除2x边框宽度可以解决问题：http://jsfiddle.net/FZxPQ/4/

Answer 1

CSS box-sizing来救援！这个属性

更改用于计算元素宽度和高度的默认CSS框模型

border-box值表示

width和height属性包括填充和边框

/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
         box-sizing: border-box;
    -moz-box-sizing: border-box;
}

但是，browser support并非100％标准化。

正如其他答案已经提到的那样，推动侧边栏不对齐的额外宽度是因为宽度计算包括边框宽度。 box-sizing只是告诉浏览器一个给定宽度/高度的元素应该在最终的宽度/高度计算中包含任何边框和填充值。

Answer 2

问题在于，当您添加边界时，外部div的大小在每个大小上增加4,2px。因此，您的容器需要增加8px。

所以将容器更改为：

 #container {
    width: 970px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}

请参阅：http://jsfiddle.net/QnRe4/13/

Answer 3

当您应用边框时，它会在div外部，因此侧边栏的宽度为184px，不适合容器。尝试addig width: 176px

http://jsfiddle.net/QnRe4/12/

#sidebar1 {
    float: left;
    width: 176px;
    border: 2px solid black;
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}

Answer 4

喜欢这个？ http://jsfiddle.net/QnRe4/3/

当您删除边框时，您的元素会丢失block显示属性。

因此，将display: block添加到这些元素可以解决这个问题。

我还将元素的宽度调整为4px宽度以保留布局，因为删除这些边框实际上减少了这些元素在页面上占用的空间。

如何在不弄乱布局的情况下为div添加边框？

4 个答案: