27

図1の効果をどのように達成できるのか疑問に思います。

フロートが残った

私がこれまでに得たのは

.box { display: inline-block; vertical-align: top; width: 100px;}

これにより、図2に示す結果が得られます（注意：float：leftでも同じことができることはわかっています）

私のHTMLコードは次のようになります。

<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>

すべての要素をできるだけ左に浮かせたいのですが、その間は上に浮かせます。

純粋なCSSでこれを行うことは可能ですか、それともJavaScriptが必要ですか？

編集：

グリッド全体がページの中央に配置されることが重要です。そのため、display：inline-blockを使用しています。ウィンドウのサイズを変更するときにグリッドをリフローさせたいので、グリッドもページに固定しないでください。

4

3 に答える 3

20

人気のライブラリMasonryを使用できます。

jQueryの動的レイアウトプラグインCSSフロートの裏側

これがコード例です...

$('#container').masonry({
  itemSelector: '.box'
});

これは、 Githubのソースと、ShoptalkポッドキャストのDavidDesandroへのインタビューです。

jQueryを使用していない人のために、フレームワークのないバージョンであるVanillaMasonryもあることに注意してください。

ヒント：すべてのコンテンツがコンテナーにバインドされるように、親コンテナーにposition：relativeがあることを確認してください。

于 2012-07-11T14:27:49.733 に答える
5

すでにjqueryを使用しているので、jquery石積みに興味があるかもしれません：http：//masonry.desandro.com

于 2012-07-11T14:29:26.853 に答える
3

最新のブラウザのみをサポートすることを目的としている場合は、CSS3の複数列のレイアウトが役立ちます。このアプローチの問題の1つは、同じ順序が維持されないことですが、HTML（またはJavascript）で順序を試すことができます。

スパンの周りに。というコンテナを追加しました#container。

#container { 
    -webkit-column-width: 100px; 
    -moz-column-width: 100px; 
    column-width: 100px; 
}

jsFiddleデモ

于 2012-07-11T14:37:08.143 に答える