CSS：如何在宽度为100%的情况下并排浮动3个div而不造成混乱？_Css_Css Float_Width_Border

CSS：如何在宽度为100%的情况下并排浮动3个div而不造成混乱？

css

CSS：如何在宽度为100%的情况下并排浮动3个div而不造成混乱？,css,css-float,width,border,Css,Css Float,Width,Border,我想在一个页面中将三个div{width:33%；border:3px solid#333；}放在一边。但它只是失败了，好像总数超过了100% 如何将3个div并排浮动并占据一个宽度：100%而不会弄乱？div框中不计算边框。它们要添加，因此会弄乱你的设置，其宽度为：3box*（33%+3px+3px），可能超过100% 使用：请参见，您可以调整结果框的大小，使其保持完美状态。：）我刚刚偶然发现了这个问题。虽然我认为Hugolpz的答案很好，但我还是忍不住在JSFIDLE上玩。所以我的答案是

我想在一个页面中将三个

div{width:33%；border:3px solid#333；}

放在一边。但它只是失败了，好像总数超过了100%

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

div框中不计算边框。它们要添加，因此会弄乱你的设置，其宽度为：3box*（33%+3px+3px），可能超过100%

使用：

请参见，您可以调整结果框的大小，使其保持完美状态。：）

我刚刚偶然发现了这个问题。虽然我认为Hugolpz的答案很好，但我还是忍不住在JSFIDLE上玩。所以我的答案是一个实验性的解决方案，而不是在现实世界中测试。但不知怎么的，我觉得它很有趣。这是你的电话号码

标记：

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

由于其绝对位置，相邻框的左右边界将重叠。在这种情况下，边框会变成10px。代码的问题是将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>


*{边距：0；填充：0；边框：0；轮廓：0；}
.thirdContainer{float:左；显示：块；宽度：33.33%；框大小：边框框；高度：100px；}

我想指出，IE lt 8不支持框大小属性然后呢？IE6和IE7是死气沉沉的浏览器。我关注的是未来，而不是过去。在大多数现实世界中，使用绝对定位布局是失败的，因为它需要知道内容的高度。@cimmanon是的，正如我所说的untested等人。我只是想四处玩耍，并想分享我的小提琴。：）我们是否应该投票删除答案？+1这是一个有用的解决方案。绝对不要删除它，它也不应该被否决。一、首先，知道我的内容高度，所以这是一个有效的解决方案，特别是因为其他答案中的“框大小”解决方案在IE8及以下版本中不起作用。谢谢

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

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