CSS:如何为宽度并排浮动3个div:100%没有搞乱？

Question

我想div { width:33%; border: 3px solid #333;}在一页内放三个.但它只是失败了,就好像总和高于100%.

如何并排浮动3个div并占据宽度:100%没有搞乱？

Answer 1

边框不计入div的框内.他们要添加,因此搞乱你的设置,它的宽度是:3box*(33%+ 3px + 3px),这可能超过100%.

使用 :

.left {
  float:left; 
  width:33.3%;
  border: 3px solid #333;
}
.box-sizing { box-sizing: border-box; }

请参阅小提琴演示,您可以调整结果框的大小,使其保持完美.:)