如何使用CSS计算中间图像之间的空白区域？

Question

我正在尝试使用CSS中的宽度缩放我的图像，以便我的图像能够响应。我希望在屏幕上有3个图像，直到某个最大宽度，但是在设置宽度为33.3％之后，它们之间的空白区域会击倒一个。我仍然喜欢图像之间的小空白区域，但我希望图像跨越其容器宽度的100％。我该如何解决这个问题？

img{
    width:33.3%;
}

实施例： http://jsfiddle.net/ErNeT/1736/

Answer 1

您可以在容器上设置font-size: 0;以删除空格，如果您只需要支持回IE9，则可以使用calc()来计算带边距的宽度。或者，如果您只需要支持现代浏览器，则可以使用flexbox！

这里的例子： http://jsfiddle.net/s3cmnpo3/

Answer 2

首先，确保所有HTML元素都将box-sizing属性设置为border-box。这可以确保填充和边框包含在元素的总宽度和高度中。source

./sbin/stop-all.sh<br>
hdfs namenode -format -clusterId CID-c9f77ebe-1f8b-4005-91cd-6abfe9443fee<br>
./sbin/start-all.sh<br>

您可以通过将5px更改为另一个宽度来更改它们之间的间隙。

Answer 3

试试这个：

img{
    width:33.3%;
    float: left;
}