0

floatを使用してdivの非常に基本的なグリッドを作成しました。

ただし、右側の列に配置されている項目の1つを展開すると、次のようになります(私が達成しようとしていることを説明するために使用した粗い/不完全な矢印を失礼します)。

これは私が期待したことですが、私が本当に望んでいることではありません。ボックスAとBを上に移動して空の場所を埋め、アイテムCHを1行上に移動して、使用可能なスペースを最も効率的に利用できるようにするための適切な方法を探しています。

これがこの問題を説明するために私が作成したJSFiddleです(クリックできないことをお詫びします。オーバーフロー担当者をもう一度スタックします...):

http://jsfiddle.net/VDV6S/4/

何か提案をいただければ幸いです。

4

1 に答える 1

1

jQuery Masonryなどが必要です。

または、項目を手動で 2 つの列に分割することもできます: http://jsfiddle.net/thirtydot/VDV6S/5/

もう 1 つのオプションはCSS3 列を使用することですが、ブラウザーのサポートが受け入れられない場合があります。

于 2012-04-07T17:00:52.773 に答える