複数の画像を横並びにし、その空白を均等にしたい

質問

■　■　■　■　■

■　■　■　■　■

■　■　■　■　■

このように、複数の画像を並ばせて表示したいのですが、
画像の横サイズがバラバラなため、どうしても一番右側がガタガタになってしまいます。

やりたいことは、大枠の左右の幅を固定し、画像の間の空白を均等にしたい。
そして、画像の下に画像名を左揃えで入れたい。

画像の横サイズはバラバラです。（縦サイズは全て同じ）
１行に入る画像の枚数も同じではありません。

テーブルを使ってやってみましたが、うまくいきませんでした。

CSSを使えばできるのでしょうか？
色々と勉強しながらやっていますがまだまだ初心者で、どうにも知識が足りません。

どなたか解決方法を教えて下さい。
よろしくお願いします！

回答No.1

ORUKA1951 · ベストアンサー

古いブラウザには無効ですから、それはそれで仕方ないとして・・

画像とその説明ですから、シンプルなul(順不同リスト)でマークアップされているでしょうから。
<div class="section">
　<h2>見出し</h2>
　<div class="album">
　　<ul>
　　　<li><img src="./images/photo/01.jpg" width="240" height="180" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/02.jpg" width="270" height="360" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/03.jpg" width="200" height="200" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/04.jpg" width="240" height="180" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/05.jpg" width="240" height="180" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/06.jpg" width="160" height="120" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/07.jpg" width="320" height="240" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/08.jpg" width="320" height="240" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/09.jpg" width="300" height="300" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/10.jpg" width="240" height="320" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　　<li><img src="./images/photo/11.jpg" width="320" height="240" alt="">
　　　　<p>画像の説明</p>
　　　</li>
　　</ul>
　</div>
</div>
だとしたら、
div.album{width:90%;margin:0 auto;}
div.album ul,div.album ul li{list-style-type:none;}
div.album ul{text-align:center;text-align:justify;}
div.album ul li{display:inline-block;text-align:left;}
で良いかと・・。

お礼

ありがとうございました。
CSSの基本的なことがちゃんと理解できておらず、なかなか苦戦していましたが、希望通りの形になりました。
もっと勉強します。感謝です！！