CSS：如何并排浮动 3 个 div 宽度：100% 而不会弄乱？答案

【问题标题】：CSS: How to float 3 divs side by side for width:100% without messing up?CSS：如何并排浮动 3 个 div 宽度：100% 而不会弄乱？
【发布时间】：2013-10-09 04:47:14
【问题描述】：

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

如何并排浮动 3 个 div 并占用宽度：100% 而不会弄乱？

【问题讨论】：

标签： css css-float width border

【解决方案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，您可以调整结果框的大小使其保持完美。 :)

【讨论】：

我想指出，IE lt 8 不支持 box-sizing 属性。;)
然后呢？ IE6&7 是死浏览器。
好吧，我关注的是未来而不是过去。

【解决方案2】：

我只是偶然发现了这个问题。虽然我认为 Hugolpz 的回答很好，但我还是忍不住想玩 jsfiddle。所以我的回答是一个实验性的解决方案，没有在现实世界的场景中测试过。但不知何故，我觉得这很有趣。这是fiddle。

标记：

<div class="outer">
    <div class="box one">1</div>
    <div class="box two">2</div>
    <div class="box three">3</div>
</div>

风格：

// Color and height properties are just here for demonstration purposes.

.outer {
    position: relative; // make the parent a relative reference point to its children
    // overflow: hidden;
    height: 40px;
    background: yellow;
}
.box {
    position: absolute; // position all children absolute but relative to the parent
    width: 33.3%;
    border: 5px solid blue;
}
.one {
    left: 0; // first box to the left
    background: red;
}
.two {
    left: 33.3%; // second box placed according to the width of the first box
    background: cyan;
}
.three {
    left: 66.6%; // third box placed according to the sum of widths of the first two boxes
    background: purple;
}

由于绝对位置，相邻框的左右边界会重叠。在这种情况下，人们期望边框变为 10px，它们在视觉上显示为 5px。

【讨论】：

在大多数实际情况下使用绝对定位进行布局会失败，因为它需要知道内容的高度。
@cimmanon 好吧，就像我说的未经测试等。我只是想四处玩耍，并认为我会分享我的小提琴。 :) 我们应该投票删除答案吗？
+1 这是一个有用的解决方案。绝对不要删除它，它也不应该被否决。我，一方面，知道我的内容高度，所以这是一个有效的解决方案，特别是因为其他答案中的“box-sizing”解决方案在 IE8 及更低版本中不起作用。谢谢！

【解决方案3】：

您的代码的问题是您将 div 大小设置为 33% + 每个 div 6px 边框。

要解决这个问题，您可以简单地使用 box-sizing 并确保重置所有样式

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type='text/css'>
            * { margin:0; padding:0; border:0; outline:0; } 
            .thirdContainer { float: left; display: block;  width: 33.33%; box-sizing: border-box; height: 100px;}
    </style>
</head>
<body>
    <div class="thirdContainer" style="background: yellow;"></div>
    <div class="thirdContainer" style="background: yellowgreen;"></div>
    <div class="thirdContainer" style="background: blue;"></div>

</body>
</html>

【讨论】：