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

I want to put three div { width:33%; border: 3px solid #333;} aside within a page. But it just fails, like if the sum was superior to 100%.

我想放三个div {宽度:33%; border:3px solid#333;}在页面内。但它失败了,就好像总和高于100%。

How to float 3 divs side by side and occupying a width:100% without messing up ?

如何并排浮动3个div并占据宽度:100%没有搞乱?

3 个解决方案

#1

The borders are not counted within the div's box. They are to add, and thus are messing up your set, its width is : 3boxes * (33%+3px+3px), which is likely more than 100%.

边框不计入div的框内。他们要添加,因此搞乱你的设置,它的宽度是:3box *(33%+ 3px + 3px),这可能超过100%。

Use :

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

See Fiddle demo, you can resize the result box it stays perfect. :)

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

#2

I just stumbled upon this question. And while I think Hugolpz answer is fine I couldn't resist to play around on jsfiddle. So my answer is rather an experimental solution and not tested in real world scenarios. But I find it interesting somehow. Here is the fiddle.

我只是偶然发现了这个问题。虽然我认为Hugolpz的答案很好但我无法抗拒在jsfiddle上玩。所以我的答案是一个实验性的解决方案,而不是在现实世界的场景中测试但我发现它有点有趣。这是小提琴。

Markup:

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

Style:

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

Left and right borders of neighbored boxes will overlap due to their absolute position. Where one would expect the borders to become 10px in that case they visually appear as 5px.

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

#3

the problem with your code is you set the div size to be 33% + 6px border per div.

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

To solve this you can simply use box-sizing and make sure you reset all the style

要解决此问题,您只需使用box-sizing并确保重置所有样式

example

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

#1