Pi_*_*Pi_ 5 html css border multiple-columns
我有以下几个要素:
<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/
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;
}
但是,浏览器支持不是100%标准化的.
正如其他答案已经提到的那样,推动侧栏不对齐的额外宽度是因为宽度计算包括边界宽度.box-sizing只是告诉浏览器一个具有给定宽度/高度的元素应该在最终的宽度/高度计算中包含任何边框和填充值.
小智 4
问题是，当您添加边框时，外部 div 的大小增加了 4，每个大小增加了 2px。因此，您的容器大小需要增加 8px。
因此，将您的容器更改为：
#container {
width: 970px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
请参阅： http: //jsfiddle.net/QnRe4/13/