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内并排看到所有四张图片。基本上，四张图片应占据#imageContainer的100％，而{{1}}占据屏幕的100％。

但我没有。尽管检查了萤火虫，每个25％，最后一张图片进入下一行。我必须让它们达到24.5％才能适应它们，但我最后不想要白色空间。

Firefox和Google Chrome都会出现这种情况。

我缺少某种CSS魔法吗？我怎么能做到这一点？

我已经在JSFiddle上设置了场景：http://jsfiddle.net/J3KXE/

Answer 1

因为你没有考虑每张图像的2px边框，除了包含块的100％宽度外，还增加了12px。您可以使用CSS新增的box-sizing属性将边框和填充区域约束为元素的内容宽度：

#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/

Answer 2

2个解决方案：

box-sizing: border-box;

或

flexbox以及所有这些（请参阅http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/）

Answer 3

你有一个2px的边框，它将盒子的大小增加到25％加上每边的2px。如果您不必支持IE7，则可以使用box-sizing: border-box。如果你必须考虑旧的浏览器，你必须声明包装器div宽度25％，没有任何边框/边距/填充，并将这些样式添加到子元素。

如何使用几个相等大小的div块占用100％的父容器

3 个答案: