4

我有以下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% 的屏幕。

但我没有。尽管检查了萤火虫，每个 25%，最后一个图像进入下一行。我必须将它们设置为大约 24.5% 以使其适合，但我不希望最后出现空白。

这发生在 Firefox 和 Google Chrome 中。

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

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

4

3 回答 3

4

这是因为您没有考虑每个图像上的 2px 边框，除了其包含块的 100% 宽度外，还增加了 12px。您可以使用box-sizingCSS 的新属性将边框和填充区域限制为元素的内容宽度：

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

于 2013-05-29T16:08:16.527 回答
1

2个解决方案：

box-sizing: border-box;

或者

flexbox和所有这些狗屎（见http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/）

于 2013-05-29T16:07:53.700 回答
0

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

于 2013-05-29T16:08:02.163 回答