3

セル間の間隔が固定された「流動的な」グリッドレイアウトでの次の試みでは、コンテナの幅が変化したときに左下の画像の上の間隔が異なる理由を誰でも説明できます. 以下に例を示します。

質問:

  • なぜこれが起こるのですか？私は何を説明しなかったのですか？
  • または、CSS を使用してそのようなグリッドを実装するより良い方法を提案できますか? 写真は縦横比を維持する必要があり、IE8 で動作する必要があります。

この jsFilleで入手できます。

幅が ~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