web-dev-qa-db-ja.com

グリッドで左と上に高さが異なるcss float要素

図1の効果をどのようにして実現できるのかと思います。

Float left up

これまでに得たのは

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

これにより、図2に示す結果が得られます（通知：float：左でも同じことができることを知っています）。

私の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を使用する理由です。ウィンドウのサイズを変更したときにグリッドをリフローさせたいので、グリッドもページに固定しないでください。

javascriptjquerycsslayout
27
Jules Colle

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

JQuery用の動的レイアウトプラグインCSSの裏側

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

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

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

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

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

20
Split Your Infinity

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

5
Chandu

さて、もしあなたが最新のブラウザをサポートすることだけを目的としているなら、 CSS3マルチカラムレイアウト が役立つでしょう。このアプローチの1つの問題は、同じ順序を維持できないことですが、HTML（またはJavaScript）で順序を操作できます。

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

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

jsFiddleデモ

3
kapa