Html 如何在不弄乱布局的情况下为 div 添加边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16736149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add borders to div without messing up the layout?
提问by Pi_
I have the following elements:
我有以下元素：
<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>
Following this style:
遵循这种风格：
/* ~~ 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;
}
I am trying to achieve this layout: http://jsfiddle.net/QnRe4/
我正在尝试实现这种布局：http: //jsfiddle.net/QnRe4/
But as soon as I un-comment the borders it turns into this: http://jsfiddle.net/FZxPQ/
但是一旦我取消注释边界，它就会变成这样：http: //jsfiddle.net/FZxPQ/
** Solved **
** 解决了 **
The border width was added to each element's total width making them too wide to fit in the container. Removing 2x the border width from each column's width solves the problem: http://jsfiddle.net/FZxPQ/4/
边框宽度被添加到每个元素的总宽度，使它们太宽而无法放入容器中。从每列的宽度中删除 2x 边框宽度解决了这个问题：http: //jsfiddle.net/FZxPQ/4/
采纳答案by Tyanna
The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.
问题是，当您添加边框时，外部 div 的大小增加了 4，每个大小增加了 2px。因此，您的容器需要增大 8 像素。
So change your container to:
因此，将您的容器更改为：
#container {
width: 970px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
回答by andyb
CSS box-sizingto the rescue! This property
CSSbox-sizing来拯救！这个性质
alters the default CSS box model used to calculate widths and heights of elements
更改用于计算元素宽度和高度的默认 CSS 框模型
The border-boxvalue means that
该border-box值意味着
the width and height properties include the padding and border
宽度和高度属性包括填充和边框
/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
However, browser supportis not 100% standardized.
但是，浏览器支持并非 100% 标准化。
As other answers have already mentioned the extra width which pushes the sidebars out of alignment is because the width calculation includes the border width. box-sizingsimply tells the browser that an element with a given width/height should include any border and padding values into the final width/height calculations.
正如其他答案已经提到的那样，将侧边栏推出对齐的额外宽度是因为宽度计算包括边框宽度。box-sizing简单地告诉浏览器具有给定宽度/高度的元素应该在最终的宽度/高度计算中包含任何边框和填充值。
回答by Seer
When you apply the borders, that goes outer the divs, so the sidebars will have 184px width which doesn't fits to the container. try addig width: 176px
当您应用边框时，它会超出 div，因此侧边栏的宽度为 184 像素，不适合容器。尝试添加width: 176px
#sidebar1 {
float: left;
width: 176px;
border: 2px solid black;
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
回答by johnkavanagh
Like this? http://jsfiddle.net/QnRe4/3/
像这样？http://jsfiddle.net/QnRe4/3/
What's happening is that your elements are losing their blockdisplay properties when you remove the borders.
发生的情况是，block当您移除边框时，您的元素会丢失其显示属性。
So, adding display: blockto those elements resolves that.
所以，添加display: block到这些元素可以解决这个问题。
I've also adjusted your element's widths by 4px in width to retain the layout, since removing those borders essentially reduces the space that those elements occupy on-page.
我还将元素的宽度调整了 4px 以保留布局，因为删除这些边框实质上会减少这些元素在页面上占据的空间。
