2

私はいくつかの画像幅固定サイズを持っています。次のように、それらをグリッドのようにいっぱいにしたい:

ここに画像の説明を入力

しかし、代わりにこれが起こります：

ここに画像の説明を入力

それらをすべて満たすにはどうすればよいですか？

html:

<div id="product-pics">
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/566x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x566.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/566x282.png" alt="" class="tile" />
</div>

CSS:

.tile {
    margin: 1px;
    float: left; /* to remove the 4px gap between images */
}
4

3 に答える 3

4

この場合、HTML の順序を少し変更する必要があります。最初に 282x566 を置き、その 1 つだけを右にフロートします。残りを左に浮かせたままにしておけば、うまくいくはずです。

デモ

HTMLの再配置:

<div id="product-pics">
    <img src="img/dummy/282x566.png" alt="282x566" class="tile double-h right" />

    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />

    <img src="img/dummy/566x282.png" alt="566x282" class="tile double-w" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
</div>

関連するCSS :

#product-pics { width: 852px; }
.tile {
    float: left;
    width: 282px;
    height: 282px;
    margin: 0 2px 2px 0;
}
.right { float: right; }
.double-h { height: 566px; }
.double-w { width: 566px; }
于 2012-09-04T12:07:14.670 に答える
3

これを行うには、JavaScript を使用する必要があります。必要なレイアウトを生成するMasonryと呼ばれる優れたプラグインがあります。Masonry は jQuery を使用しますが、そうでないVanilla Masonryポートがあります。

あなたが直面している問題は、ブラウザーがページを最初に水平にレイアウトし、次に垂直にレイアウトするという事実です。組積造はこれを変更し、列のレイアウトを作成します。

このレイアウトはCSS3 の列でも生成できますが、ブラウザーのサポートは十分ではありません (IE10+、その他の最新のブラウザー)。

于 2012-09-04T11:48:07.173 に答える
0

IMG タグの代わりに CSS クラスを使用し、最初の画像の例の下にある画像を繰り返します。

.tile1 {
background:url('img/dummy/282x282.png') repeat top left;
width:100%; /* based on your area */
height:500px; /* based on the image height*/
}

また、CSS で利用可能な別の「繰り返し」オプションも確認してください。

于 2012-09-04T11:45:55.350 に答える