3

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

问题：

  • 为什么会这样？我没有说明什么？
  • 或者/你能建议一种更好的方法来用 CSS 实现这样的网格吗？图片必须保持比例，它应该适用于IE8。

在这个 jsFile中可用。

~200px 宽度：
宽度 ~200px

和 ~1120px 宽度（裁剪）：
宽度 ~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;
}
4

1 回答 1

0

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

于 2013-08-06T19:35:37.160 回答