ようこそ ゲスト さん、新規登録(無料)して気になる疑問を解決しませんか?

質問

質問者:labilion CSSで画像を均等配置
困り度:
  • すぐに回答を!
widthが800pxのブロック内で同じ大きさの4つの画像を横に一定感覚で配置したいです。
普段は各画像にmarginを設定して均等に見えるようにしているのですが、
他に何かスマートな方法はありますでしょうか?
独自拡張、テーブルの使用以外の方法でお願いいたします。
質問投稿日時:08/03/17 15:53
質問番号:3870752
この質問に対する回答は締め切られました。
最新から表示回答順に表示良回答のみ表示

回答

良回答20pt

回答者: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;}
種類:アドバイス
どんな人:一般人
自信:参考意見
回答日時:08/03/19 08:39
回答番号:No.2
この回答へのお礼ありがとうございます。
リストタグでやる事にしました。

回答

 

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

スマートかどうかは?ですが、width: 800px; が固定ならば、4つの画像を 800px 幅に均等に並べた画像1枚( width: 800px, height: **px;)にしてしまうという手がありますね。もしその4枚それぞれの間に なにか文章などがあるのでしたら、文字ごと画像にしてしまえば font種別も好みで固定することが出来ます。
種類:回答
どんな人:一般人
自信:参考意見
回答日時:08/03/17 22:45
回答番号:No.1
この回答へのお礼ありがとうございます。
今の書き方で問題があるわけではないのですが、どうもかっこよくない気がしたので・・・
もしかしたらもっと良い書き方があるのではないかと思い質問させていただきました。
 
最新から表示回答順に表示良回答のみ表示