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

Question

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

问题：

• 为什么会这样？我没有考虑什么？
• 或 /您能否建议使用CSS实现此类网格的更好方法？图片必须保持比例，它应该适用于IE8。

this jsFille。

宽度约为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;
}

Answer 1

左下角的图像位于底部绝对位置：0; left：0;，因此它与它上面的图片之间的间距仅取决于左下图像的宽高比。换句话说，如果要减小该空间，则需要增加该图像的高度。