html - 如何让几个大小相等的 div block 占据父容器的 100%

Question

我有以下 CSS:

#imageContainer {
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
}

.divSelectImage {
    border: 2px solid red;
    width: 25%;
    margin: 0px;
    margin-bottom: 10px;
    float: left;
}

我有四个 .divSelectImage 实例，这就是宽度为 25% 的原因。我希望在 #imageContainer 中并排看到所有四个图像。因此，从本质上讲，这四个图像应该占据 100% 的 #imageContainer，而后者又占据 100% 的屏幕。

但我没有。尽管检查了 Firebug ，每个 25%，但最后一张图像进入下一行。我必须将它们调整到大约 24.5% 才能适合它们，但我不希望末尾有空白。

这在 Firefox 和 Google Chrome 中都会发生。

我是否缺少某种 CSS 魔法？我怎样才能做到这一点？

我已经在 J​​SFiddle 上设置了场景:http://jsfiddle.net/J3KXE/

Answer 1

这是因为您没有考虑到每张图片的 2px 边框，除了其包含 block 的 100% 宽度之外还添加了 12px。您可以使用 box-sizing CSS 的新属性，用于将边框和填充区域限制为元素的内容宽度:

#imageContainer {
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
}

.divSelectImage {
    border: 2px solid red;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    margin: 0px;
    margin-bottom: 10px;
    float: left;
}

http://jsfiddle.net/J3KXE/1/