javascript - div をグリッドとして利用するには?

Question

さて、データベースから最後の 8 つのエントリを表示し、それらをグリッド形式で表示する Web サイトを作成していますが、グリッドが正しく表示されず、次のように表示されています: 1 :

しかし、私はそれらを次のように表示したいと思っています:

申し訳ありませんが、図面に余分な列を描画することをお勧めします。そして、何があっても同じ列と行にとどまるだけでなく、その上のものの下にもあります。コードは私の jsfiddle にあります: http://jsfiddle.net/PGdMd/

また、各 div のコンテンツ テキストは mySQL データベースに入力されたデータに応じて変化するため、css はレスポンシブである必要があります。

<h1>Sorry it made me put this here</h1>

Answer 1

関連する質問から読むと、jQuery の masonaryが必要なようです。それか、アイソトープか。

Answer 2

Have a look at Masonry. This is a jQuery plugin that will do what you want and a lot more.

http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout

Answer 3

レイアウトを簡単に実装するために使用できる CSS フレームワークをいくつか検討しましたか? Blueprint、960 Grid、Twitter Bootstrap、foundation など。これを簡単にするだけでなく、一般的にプロジェクトを簡素化する 3 列の実装が多数あります。