CSSで画像を均等に横並びに配置するには？

質問

テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。
下記のようなイメージで配置したいです。6列。行は可変。
■…画像
画像の数に応じて、はみだした画像は自動的に下に改行される感じです。

■　■　■　■　■　■
■　■　■　■　■

HMTLソースは以下のとおりです。

<ul>
<li><a href="*"><img src="img/01.jpg" /></a></li>
<li><a href="*"><img src="img/02.jpg" /></a></li>
<li><a href="*"><img src="img/03.jpg" /></a></li>
<li><a href="*"><img src="img/04.jpg" /></a></li>
<li><a href="*"><img src="img/05.jpg" /></a></li>
<li><a href="*"><img src="img/06.jpg" /></a></li>
<li><a href="*"><img src="img/07.jpg" /></a></li>
<li><a href="*"><img src="img/08.jpg" /></a></li>
<li><a href="*"><img src="img/09.jpg" /></a></li>
<li><a href="*"><img src="img/10.jpg" /></a></li>
<li><a href="*"><img src="img/11.jpg" /></a></li>
</ul>

どのようにCSSを定義すればスマートでしょうか？
よろしくお願いします。

回答No.1

naokita · ベストアンサー

列数も考慮して画像の大きさや均等、隙間も考えなければいけませんが、
方法は沢山ありますのでお好みです。
ul li でリストを使うのでしょうか？
ul li だと縦並びになるのでリストをCSSでつくるなら横並びに設定します。
li {float: left; margin: 0 20px 20px 0; padding: 0; list-style:none; }
イメージはこんな感じでmarginの数値を調整すれば隙間が出来て列数を上手く調整。
----------------------------------------------------------

下記が一番単純な方法

.xxx img{ margin: 0 20px 20px 0; border-style: none; }

<div class="xxx">
<a href="*"><img src="img/01.jpg" /></a>
<a href="*"><img src="img/02.jpg" /></a>
<a href="*"><img src="img/03.jpg" /></a>
<a href="*"><img src="img/04.jpg" /></a>
<a href="*"><img src="img/05.jpg" /></a>
<a href="*"><img src="img/06.jpg" /></a>
<a href="*"><img src="img/07.jpg" /></a>
<a href="*"><img src="img/08.jpg" /></a>
<a href="*"><img src="img/09.jpg" /></a>
<a href="*"><img src="img/10.jpg" /></a>
<a href="*"><img src="img/11.jpg" /></a>
</div>
-----------------------------------------
隙間nargin値の調整やdiv枠のwidthで幅を調整したりして６列にすれば良い。
質問の意味がイメージと違っていましたか？

補足

丁寧な回答ありがとうございます。
おかげ様でリストでも横並びで均等に配置することができました。
※1点追加で質問させてもらっていいですか？
右端の画像には右のマージンを空けず、div枠の幅にぴったりとくっつけたいのですが、この場合どう指定すればいいのでしょうか？

回答No.3

naokita

間違いです。訂正。

<a href="*"><img src="img/06.jpg" style="margin-right: 0;" /></a>

お礼

回答ありがとうございます。
おかげで右マージンゼロにすることができました。
これからもっと勉強します。

回答No.2

naokita

#1です。補足への回答
色々方法があるので、その後どんなHTMLを書いたかわかりませんが
６列が並んでいる状態で６番目の右マージンだけを無くしたいのならば
６番目だけ右マージンを解除すれば良い。　img/06.jpg のマージンを 0 設定。
その分、全体枠 width の幅を小さくするか、画像の隙間を広げて均等にするか。

<a href="*"><img src="img/06.jpg" margin-right: 0; /></a>

各々配置するなら、各 a を display blockにし width で好きなように配置。
htmlでアンカー を改行して書くか一列に書くかによっても各画像間の隙間が違うので注意。