5

画像間に間隔がないグリッドのようなシステムで画像を並べて表示しようとしています。DOM 内の画像の順序を制御できない場合、javascript なしで行うことは可能ですか?

画像がすべて同じサイズではない場合、ギャップが生じるため、コンテナを単にフロートすることはできません。

http://jsfiddle.net/bzCNb/3/

.wrapper
{
    width:400px;
}

/* One grid unit */
.box1
{
    float:left;
    overflow:hidden;
    height:100px;
    width:100px;
}

/* 2x bigger than a box1, takes up 4 grid units */
.box4
{
    float:left;
    overflow:hidden;
    height:200px;
    width:200px;
}

最初の 3 行は、DOM 内の要素の順序により適切に動作します。

JavaScriptがないと無理だと思います。うまくいけば、私は間違っています。=)

4

1 に答える 1

4

次のチュートリアルのように、column-count CSS3プロパティを使用してグリッドを作成し、画像を収めることができます。http://css-tricks.com/seamless-sensitive-photo-grid/

于 2013-02-05T23:35:53.783 に答える