各 div に画像が含まれる div のリストがあります。画像の幅は、ページをロードする前にはわかりません。幅 960px のコンテナ div があります。行幅が許す限り多くの画像を各行に配置して、画像を行に配置するにはどうすればよいですか? たとえば、4 つの画像 (300px、400px、200px、250px) がある場合、最初の 3 つを 1 行に配置し、4 番目の画像を 2 行目に配置する必要があります。幅は 960 より大きく、各行で画像を中央に配置する必要があります。
css を使って考えられることはすべて試しましたが、うまくいく方法が見つかりませんでした。
何かアイデアはありますか？
このようなものですか？
わかりました、画像を検索したくなかったので、単に div で作業しましたが、主なポントは、配置と適合の両方が必要な要素であり、それらを作成しますinline-block。インラインは複数行、ボックスは幅と高さの両方を設定できます。その後、親に設定するだけで済みます。text-align: center
編集 おっと、div の間にスペースを入れました (実際のスペース文字のように)。それらはインラインであるため、div 間にスペースとして表示されます。THISのように、コンテナー間に空白を入れないようにしてください。
コンテナーを紛失した場合は、使用する必要さえありませんinline-block。
http://jsfiddle.net/bryandowning/ghcmM/
ただし、これは画像のリストであるため、順序付けられていないリストinline-blockの要素に対して使用する必要があります。li