css - 画像をグリッドに配置する

Question

次の例のように、画像をきれいに配置する方法を探しています。

いくつかの方法を試しましたが、何もうまくいきませんでした。私は試してみましfloat:leftたfloat: rightが、より大きなものは成功しませんでした。position:absoluteもちろん機能しますが、ギャラリーが複数の位置に表示される可能性があるため、実用的ではありません。

Answer 1

私は実際にはフロートを使用します。画像がインライン要素であることを確認してください。大きなものを右または左にフロートさせ、他の画像でそれらを囲むことができます: CSS:

.small{
        width:100px;
        float:right;
    }
    .left{
        float:left;
    }
    .right{
     float:right;   
    }

HTML:

<img src="http://www.just4cats.org/images/cats_012.jpg" class="left" height="450" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" />

デモ

いくつかの幅の計算を計算する必要があります:

大きな画像の幅÷小さな画像の幅=大きな画像の高さ÷小さな画像の高さ

上記の場合は 66 * 2 = 12です。エッジ用に 1 つ追加します。つまり、セクションごとに 1 つの大きな画像と 13 の小さな画像があります。

しかしその後は順風満帆。

Answer 2

これが私の完全に機能する簡単な試みです

css:

.wrap {
    height:auto;
    width:150px;
    overflow:hidden;
}
.relef {
   position: relative;
   float: left;
}
.relri {
   position: relative;
   float: right;
}
    .segment {
        width:150px;
        height:100px;
    }
    .row {
        height:50px;
        width:150px;
    }

    .box{
        height:46px;
        width:46px;
        margin:2px;
        background-color:black;
    }
.bigbox {
    height:96px;
    width:96px;
    margin:2px;
    background-color: red;
}

と html は、何度でもループできます。

        <div class="wrap">
            <div class="segment relef">
                <div class="bigbox relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
            <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
            <div class="segment relri">
                <div class="bigbox relri"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
            <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
            <div class="segment relef">
                <div class="bigbox relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
                <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
            <div class="segment relri">
                <div class="bigbox relri"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
                <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
        </div>

デモ http://jsfiddle.net/jw8dh/3/

すべての画像が正方形の場合、幅: 100%、高さ: 100% の画像を .box と .bigbox に入力するだけです。