Question

我的div.wrap宽100％，内有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空白，我需要填补所有空间。有没有人知道这方面的解决方案？

Answer 1

设置最后一个div的宽度，使得宽度之和等于100：

.wrap {
    overflow: hidden;
}
.wrap div {
    width: 33.3%;
    float: left;
    background-color: red;
}
.wrap div:last-child {
    width: 33.4%;
}

Demo

Answer 2

通过模拟Tables行为，我们可以轻松实现这一目标：

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以检查尺寸。

Answer 3

由于您只能设置最大精度为1px的元素的宽度，因此可能有一个div大于其他div，您无法真正避免这种情况。话虽如此，要使最后一个div填充剩余的1-2px，请执行以下操作：

.wrap #div3 {width:33.4%;}

其中#div3是最后div（或任何div，但只有一个）的ID。

Answer 4

这里只是为了解决另一种使用不同修复的方法：

http://jsfiddle.net/c5bR9/

.wrap div {
    float: left;
    width: 33.3%;
}
.wrap div:last-child {
    float: none;
    width: auto;
    margin-left: 66.6%;
}

我过去曾遇到过部分百分比（主要是Internet Explorer）的问题，他们计算的比例大于100％ - 意味着你的第三列会下降。上面讲述了div填充空间的自然习惯，以及在这个自动宽度计算中吃掉边缘的自然习惯。

如何用相同大小的3个div填充100％div的所有空间？

4 个答案: