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

Question

在下面对单元格之间固定间距的“流动”网格布局的尝试中，任何人都可以解释为什么当容器宽度发生变化时左下角图像上方的间距会不同。示例如下。

问题：

• 为什么会发生这种情况？我没有考虑什么？
• 或/您能建议一种更好的方法来使用 CSS 实现这样的网格吗？图片必须保持比例，并且应该适用于 IE8。

可在this jsFille 获得。

宽度约为 200 像素：

还有 ~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;
}

Answer 1

您的左下角图像绝对定位在底部：0； left:0;，所以它和它上面的图片之间的间距只取决于左下图的纵横比。换句话说，如果你想减少那个空间，你需要增加那个图像的高度。