3

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

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

4

3 回答 3

7

边界不计算在 div 的框中。他们要添加，因此弄乱了您的设置，其宽度为：3boxes * (33%+ 3px+3px )，可能超过 100%。

利用 ：

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

请参阅Fiddle 演示，您可以调整结果框的大小，使其保持完美。:)

于 2013-05-14T22:07:09.463 回答
1

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

标记：

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

于 2013-05-14T23:16:08.287 回答
1

您的代码的问题是您将 div 大小设置为每个 div 33% + 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>
于 2013-05-14T23:53:46.103 回答