具有固定像素间距的流式网格布局

Question

在下面这个“流体”网格布局中，单元格之间有固定的间距。当容器宽度改变时，有人能解释一下为什么底部左侧图像上面的间距会有所不同吗？如下是示例：

问题：

• 这是为什么？我没考虑到什么吗？
• 还有，你能否建议一种更好的使用CSS实现此类网格的方法？图片必须保持比例，并且应该在IE8中工作。

可在此JSFiddle链接中查看。 大约200px宽度：
约1120px宽度（裁剪）：
HTML:

<div class="container">
    <div class="col1"><img src="http://placekitten.com/200/200"/></div>
    <div class="col2"><img src="http://placekitten.com/200/200"/></div>
    <div class="col3">
        <img src="http://placekitten.com/200/200"/>
        <img src="http://placekitten.com/285/678"/>
    </div>
    <div class="col4"><img src="http://placekitten.com/875/532"/></div>
</div>

CSS（层叠样式表）：

.container{    
    outline: 2px solid #000;
    margin: 30px auto;

    overflow: auto;
    font-size: 0;
    position: relative;

    padding-left: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
img{
    width: 100%;
}

.col1, .col2, .col3{
    width: 37.5%;
    float: left;
}

.col1{
    margin-left: -20px;
}
.col1, .col2{
    margin-right: 10px;
}

.col3{
    width: 25%;
}
.col3 img:first-child{
    margin-bottom: 10px;
}

.col4{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 75%;
    padding-right: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

- Qtax

Answer 1

你的左下角图像被绝对定位在 bottom:0; left:0;，因此它与上面的图片之间的间距仅取决于该左下角图像的纵横比。换句话说，如果你想减小这个空间，你需要增加该图像的高度。

- andi

---

不，不仅如此。这还取决于图像的纵横比，它们“决定”容器的高度和它们之间的间距。因此，这并没有回答任何问题。 - Qtax

基本上，这里不应该有任何绝对定位。我通常不主张使用表格，但也许使用表格布局可以在这里得到更好的结果。然后您只需设置单元格间距即可。 - andi

“它与其上方的图片之间的间距仅取决于左下角图像的纵横比”，您能否通过更改该图片的纵横比来说明这一点，以便间距始终保持不变？如果不能，则该语句在另一个方面是错误的。表格可能有效，但我不再百分之百确定。也许这里有些地方不对劲，这就是我们出现差异的原因。 - Qtax

我认为你的问题在于，当你调整窗口大小时，整个网格的纵横比会发生变化，因为你设置了固定的10像素间距。为了保持一定的纵横比，你需要使这个间距也是流动的。尝试将间距设置为0，并使网格对齐，然后我认为你会发现它在调整大小时保持一致。 - andi