5

我有以下元素：

<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/

** 解决了 **

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

4

4 回答 4

7

CSSbox-sizing来救援！这个性质

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

该border-box值意味着

宽度和高度属性包括填充和边框

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

但是，浏览器支持并不是 100% 标准化的。

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

于 2013-05-24T13:34:58.293 回答
4

问题是当你添加边界时，外部 div 的大小增加了 4，每个大小增加了 2px。因此，您的容器需要增大 8 像素。

因此，将您的容器更改为：

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

见：http: //jsfiddle.net/QnRe4/13/

于 2013-05-24T13:36:14.003 回答
3

当您应用边框时，它会超出 div，因此侧边栏的宽度为 184 像素，不适合容器。试试加法width: 176px

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

#sidebar1 {
    float: left;
    width: 176px;
    border: 2px solid black;
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}
于 2013-05-24T13:32:59.657 回答
1

像这样？http://jsfiddle.net/QnRe4/3/

block发生的情况是，当您删除边框时，您的元素正在失去它们的显示属性。

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

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

于 2013-05-24T13:32:27.447 回答