0

私は、互いにうまく接続する画像のグリッドを作成しようとしています。

これが私のグリッドです： http ：//www.yannickluijten.be/test2

すべての画像の高さが同じではないため、これが問題になります。4番目の画像（灰色）を最初の画像（緑色）の下に表示したいのですが、3列で作業したくありません。これどうやってするの？

.img1 {
    width: 300px;
    height: 200px;
    float: left;
    background: green;
}

.img2 {
    width: 300px;
    height: 400px;
    float: left;
    background: blue;
}

.img3 {
    width: 300px;
    height: 300px;
    float: left;
    background: yellow;
}

.img4 {
    width: 300px;
    height: 400px;
    float: left;
    background: gray;
}
4

2 に答える 2

0 
.img4 {
width: 300px;
height: 400px;
float: left;
background: gray;
clear: both;
}

4番目の画像は最初の行に表示されますが、最初の画像の真下にはありません。

于 2013-03-24T17:23:16.753 に答える
0

CSSフロートでは、可変高さのフロート要素が左端に「ラップアラウンド」するタイミングを制御する方法はありません。それらの一部の間に不要な垂直方向の間隔が表示されることはありません。

jQuery Masonryのようなモザイクプラグインは、この種のものを対象としています。どの写真をどの列に表示するかを制御できるかどうかはわかりませんが、適切に機能する可能性があります。

CSS列を使用することもできますが、どの写真をどの列に表示するかについての制御が制限されており、IE9以前では機能しません。

于 2013-03-24T17:37:05.933 に答える