如何用相同尺寸的3 div填充div 100%的所有空间？
如何用相同尺寸的3 div填充div 100%的所有空间？
提问于 2014-04-09 13:27:27
我有一个100%宽度的div.wrap，里面有3 div。我需要3 div有相同的宽度，可以填补div.wrap的所有空间。
我尝试过这样做: html：
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>css：
.wrap{width:100%;position:relative;}
.wrap div{width:33.3%;float:left;}但是在绝对的右边，我有一个像2px一样的空白，我需要填充所有的空间。有人知道解决这个问题的办法吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-04-09 13:30:54
因为您只能以1px的最大精度来设置元素的宽度，所以可能有一个div大于其他的div，因此您无法真正避免这一点。尽管如此，要使最后一个div填充剩余的1-2px，请执行以下操作：
.wrap #div3 {width:33.4%;}其中#div3是最后一个div的id (或者任何一个div，但只有一个)。
Stack Overflow用户
发布于 2014-04-09 13:35:03
将最后一个div的宽度设置为宽度之和等于100：
.wrap {
overflow: hidden;
}
.wrap div {
width: 33.3%;
float: left;
background-color: red;
}
.wrap div:last-child {
width: 33.4%;
}Demo
Stack Overflow用户
发布于 2014-04-09 13:41:21
通过模拟表的行为，我们可以很容易地做到这一点：
html：
<div class="wrap">
<div>a</div>
<div>b</div>
<div>c</div>
</div>css：
.wrap{
display: table;
table-layout: fixed;
width: 100%;
}
.wrap div{
display: table-cell;
width: 100%;
}请随意添加一些背景颜色和东西到.wrap div，以检查大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22964039
复制相关文章
相似问题
腾讯云开发者
