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

【问题标题】：How to add borders to div without messing up the layout?如何在不弄乱布局的情况下为 div 添加边框？
【发布时间】：2013-05-24 13:28:08
【问题描述】：

我有以下元素：

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

【问题讨论】：

标签： css html border multiple-columns

【解决方案1】：

CSS box-sizing 来救援！此属性

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

border-box 值表示

宽度和高度属性包括内边距和边框

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

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

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

【讨论】：

这种方法的缺点是浏览器兼容性。上面的代码适用于一些现代浏览器，但实际上您需要使用供应商前缀来解释所有当前浏览器。即使是最新的 FireFox 仍然需要 -moz。（来源：css-tricks.com/box-sizing）。
这可能是 OP 正在寻找的答案。 @johnkavanagh - 供应商前缀并不是世界末日，除了浏览器兼容性之外，除非您打算支持 IE6/IE7（naaah ... ;)）。
对我来说box-sizing 适用于所有浏览器。只需要为 Firefox 添加供应商前缀，这还不错。我的限制是IE8，不要在意旧的浏览器。

【解决方案2】：

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

所以把你的容器改成：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

另一种解决方案，如果您将box-sizing 属性添加到您的侧边栏：read more about this here

【解决方案4】：

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

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

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

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

【讨论】：

是的。比我的答案要好得多。 :)
我不知道边框的宽度被添加到元素的总宽度中。谢谢@jognkavanagh
没问题！作为参考，这里有一些关于盒子模型如何工作的更多信息：w3.org/TR/CSS2/box.html本质上：宽度由内容宽度+填充组成。如果您有边框，则除了宽度之外，还会添加边框的大小，因此如果您使用固定宽度和边框，则必须考虑宽度中的边框（或边框移除）。同样，如果您更改了填充。