イメージの幅に応じて行にイメージを配布するCSSレイアウト？

Question

私は各divの中に画像を持つdivのリストを持っています。 ページをロードする前にイメージの幅がわかっていません。 幅960ピクセルのコンテナdivがあります。どのように行の幅が許す限り多くのイメージを持つ各行を持つ行のイメージを配置できますか？たとえば、4つの画像（300px、400px、200px、250px）がある場合は、最初の3行を1行に、4行目を2行目に1行に4つずつ入れる幅は960より大きくなります。各行に画像を中央に配置する必要があります。

私はCSSを使って考えることができたすべてを試しましたが、動作する方法が見つかりませんでした。

アイディア？

Answer 1

何かのようにTHIS？

私は画像を検索したくなかったので、私は単純にdivで作業しましたが、メインポントは：整列して合わせる必要がある要素は、inline-blockになります。複数行にするインライン、幅と高さの両方を設定できるボックス。その後、あなただけの親に設定する必要があります。text-align: center

EDIT Oups、私は（実際の空白文字のような）のdiv要素の間にスペースを入れていると、彼らは、インラインであるため、彼らは、divの間のスペースとして表示されます。 THIS

Answer 2

コンテナを紛失した場合でも、inline-blockを使用する必要はありません。

http://jsfiddle.net/bryandowning/ghcmM/

これはイメージのリストであるため、しかし、あなたはおそらく順不同リストのli要素にinline-blockを使用する必要があります。