ラップする固定幅の要素

Question

私は自分のページに表示したいサムネイルをたくさん持っています。サムネイルの幅は必ずしもすべて同じではなく、いずれも高さではありません。私がしたいのは、各要素が均等な指定された幅であるように、きちんとした行と列に整列するような表形式で配列することです。

テーブルを使用したくない場合は、ブラウザのサイズを変更して行数や列数を自動的に変更してください。

私は、画像を貼り付ける試してみた：フロート左で固定幅の

1. のdivの。問題は、不均等な高さのために、ラップされたdivが上記の行のdivの下部に「キャッチ」する可能性があるためです。

2. スパンとlis：「幅：200px」または幅を固定していないものを設定します。しかし、彼らはうまく包む。

だからアイデアがありません。助言がありますか？

Answer 1

スパンまたはlisにdisplay: inline-blockを使用すると、幅を設定できるようになります。

http://jsfiddle.net/bnmPR/

Answer 2

あなたはli Sを使用し、それらをdisplay:inline-block;

http://jsfiddle.net/jasongennaro/zDC2w/

ドラッグし、それが動作を確認するウィンドウの上に作ることができます。

国境、幅、高さは、あなたがまだあなたがフロートが残っていることをdivを使用して、このスクリプトを追加することができるという効果に

Answer 3

を表示するために追加しました：http://masonry.desandro.com/

彼らはそのように、それが垂直のdivを押し上げます互いに隣り合っている。