CSS:如何在宽度为 100% 的情况下并排 float 3 个 div 而不会弄乱？

Question

我想放三个 div { width:33%; border: 3px solid #333;} 在一个页面的旁边。但它就是失败了，就像总和超过 100% 一样。

如何并排 float 3 个 div 并占据宽度:100% 而不会弄乱？

Answer 1

边框不计入 div 的框内。他们要添加，因此弄乱了你的集合，它的宽度是:3boxes * (33%+3px+3px)，这可能超过 100%。

使用:

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

参见 Fiddle demo ，您可以调整结果框的大小以保持完美。 :)