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; }

请参阅Fiddle demo，您可以调整结果框的大小，使其保持完美。：）

Answer 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。

Answer 3

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

要解决此问题，您只需使用大小调整，并确保重置所有样式

例如

<!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>

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

3 个答案: