CSSで画像を均等配置

質問

widthが800pxのブロック内で同じ大きさの４つの画像を横に一定感覚で配置したいです。
普段は各画像にmarginを設定して均等に見えるようにしているのですが、
他に何かスマートな方法はありますでしょうか？
独自拡張、テーブルの使用以外の方法でお願いいたします。

回答No.2

hiyokko7 · ベストアンサー

<dl>（定義）タグを使って左に回り込み（float:left;）させれば画像を均等に配置できると思います。
<dl>タグではなく、<ul>（リストタグ）を使ってもできそうですね。参考になれば。

ソース
<dl>
<dt><img src="**"></dt>
<dd>テキストなど</dd>
</dl>

<dl>
<dt><img src="**"></dt>
<dd>テキストなど</dd>
</dl>

<dl>
<dt><img src="**"></dt>
<dd>テキストなど</dd>
</dl>

スタイルシート
dl {float:left;}

お礼

ありがとうございます。
リストタグでやる事にしました。

回答No.1

goulan

現在の設定で何か問題があるのでしょうか。ブラウザによって見え方が変わってしまう・・・とか。

スマートかどうかは？ですが、width: 800px; が固定ならば、４つの画像を 800px 幅に均等に並べた画像１枚( width: 800px, height: **px;)にしてしまうという手がありますね。もしその４枚それぞれの間に なにか文章などがあるのでしたら、文字ごと画像にしてしまえば font種別も好みで固定することが出来ます。

お礼

ありがとうございます。
今の書き方で問題があるわけではないのですが、どうもかっこよくない気がしたので・・・
もしかしたらもっと良い書き方があるのではないかと思い質問させていただきました。