我想把三个div { width:33%; border: 3px solid #333;}放在一页内。但它只是失败了，就像总和超过 100% 一样。
如何并排浮动 3 个 div 并占用宽度：100% 而不会弄乱？
问问题
12005 次
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 回答