画像の横に画像を配置したいです。

質問

画像が１個あって、その横に画像を少し離して配置したいのですが、ふつうにすると、横に行かずに、画像の下に行ってしまい、画像が縦に２つ並ぶ形となってしまいます。そうではなくて横に画像を２つ並べるにはどうしたらよいのでしょうか？お願いします。

回答No.4

yambejp · ベストアンサー

ふつうにするとの定義が不明。
ふつうにすると横にいくと思いますが・・・

対策１
スペースでインデントする（ベタな方法）
<img src="1.jpg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="2.jpg">

対策２
divでfloatする。間隔はmarginで調整。
<div style="float:left;margin-right:50"><img src="1.jpg"></div><div><img src="2.jpg"></div>

対策３
imageを直接floatする。間隔はmarginで調整。
<img src="1.jpg" style="display:block;float:left;margin-right:50"><img src="2.jpg" style="display:block;">

お礼

お返事ありがとうございます。
２の方法でやってみて、確かに横に移動させることができたのですが、その上にさらに同じ画像が２つ出てきてしまい、２つしかつけていないのに、合計４つの画像が出てきてしまって、その新たに出てきた２つの画像にはバツが付いてしまってます。２つだけにするにはどうしたらよろしいのでしょうか？よろしくお願いします。

回答No.5

goldfox

「ふつうに」書けば画像は横に並びます。
「横に行かないふつう」のソースはどのようなものですか？
（ソースを提示しましょう）
画面の表示領域の横幅が画像2枚の横幅に足りないということはありませんか？
> 少し離して
この「少し」とはどの程度ですか？
それによって回答も方法も変わってきます。あいまいな書き方はせず自分がやりたいことを詳しく書くようにしましょう。

<p><img src="1.jpg" alt=""><img src="2.jpg" alt=""></p>
画像の間にスペースを空けるには余白を指定しましょう。
<p><img src="1.jpg" alt=""><img src="2.jpg" alt="" style="margin-left:10px;"></p>
画面横幅が足りなくて折り返されてしまうなら、pの横幅を指定しておきます。（横幅＝1.jpg横幅+2.jpg横幅+余白）
<p style="width:800px;"><img src="1.jpg" alt=""><img src="2.jpg" alt="" style="margin-left:10px;"></p>

回答No.3

345itati

スタイルシートはいかが。
→http://www.tagindex.com/stylesheet/box/float.html

回答No.2

kaesal

私も「table」タグを使うのがいいと思います。

参考URL：

http://www.tagindex.com/html_tag/table/table.html

回答No.1

dkljdkfsj

色々方法はあります。
table　タグとか