1箇所に複数画像を別々に配置は可能でしょうか？

質問

出来ないのかも知れませんが、もし可能かつご存知の方いらっしゃいましたらアドバイスをお願いいたします。

行いたいことは、1つの場所に複数の画像を配置し、それぞれの配置を異なる場所へ置きたいということです。具体的には…、

<div id="hoge"> ←このコンテナ内に画像を複数配置
<img src="img001.jpg" /> ←この画像はセンタリング
<img src="img002.jpg" /> ←この画像は右寄せ
</div>

1つのDIV内にセンタリングと右寄せで画像を配置という事です。
positionにて相対的に試してみたのですが、中央の<img src="img001.jpg" />のサイズによって<img src="img002.jpg" />の配置が変わってしまうので断念しました。その時は

<div id="hoge">
<img src="img001.jpg" /><span id="hage"><img src="img002.jpg" /></span>
</div>

という感じで、<span id="hage">に相対positionでした…。駄目でしたが。。

条件としてはそれぞれにリンクを定義したいので背景ではなく画像として配置したいと思います。

どなたかアドバイスのほどよろしくお願いします。

回答No.1

yukiponta · ベストアンサー

<img src="img001.jpg" />はmargin:0 auto;を指定して、
<img src="img002.jpg" />はposition:absolute; right:0;
でいいのではないでしょうか。
あと、imgにはdisplay:block;をつけてみてください。

回答No.3

DrFell

div{width:100%;position:absolute;line-height:0;}
div p{text-align:center;height:0;margin:0;padding:0;}
div p+p{text-align:right;right:0;top:0;}

<div>
　<p><a href=""><img src="big.jpg" width="50%" height="200"></a></p>
　<p><a href=""><img src="small.jpg" width="200" height="200"></a></p>
</div>

こんなかんじでしょうか？
大きなイメージに小さなイメージがのっているイメージかなと。

回答No.2

ORUKA1951

けっしてデザイン目的でHTMLは書かない。
「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」は、スタイルシートを用いるときの大原則です。
　---文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる---

　複数のリンクをひとまとめにしてということは、HTMLは
<div class="nav"><!-- ナビゲーションとして -->
　<p><a href=""><img src="" width="" height="" alt=""></a></p>
　　<!-- 異なる段落(p:Pargraph)として -->
　<p><a href=""><img src="" width="" height="" alt=""></a></p>
</div>
や
<div class="nav"><!-- ナビゲーションとして -->
　<ol><-- 序列リスト -->
　　<li><a href=""></a></li><!-- 画像は背景的なのでHTMLには書かない -->
　　<li><a href=""></a></li>
　</ol>
</div>
　とかじゃないですか？？
　このようにHTMLは文書構造だけしか書きません。
　ちなみにclassは「DIV要素・・・・は、・・・class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」として使用しています。HTML5だと文書構造を示す要素が追加された( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )ので・・
<nav><!-- ナビゲーションとして -->
　<p><a href=""><img src="" width="" height="" alt=""></a></p>
　　<!-- 異なる段落(p:Pargraph)として -->
　<p><a href=""><img src="" width="" height="" alt=""></a></p>
</nav>
や
<nav><!-- ナビゲーションとして -->
　<ol><-- 序列リスト -->
　　<li><a href=""></a></li><!-- 画像は背景的なのでHTMLには書かない -->
　　<li><a href=""></a></li>
　</ol>
</nav>

まず、率直にHTMLは文書構造だけを書いてください。書くのもメンテナンスも、先でデザイン変えるのも楽ですから・・。検索エンジンも理解してくれますしね。

　そのうえで、上のHTML4.01でしたら、
div.nav{width:50%;margin:0 auto;position:relative;}
div.nav p{margin:0;text-align:center;}
div.nav p img{display:inline-block;width:300px;height:auto;}
div.nav p+p{text-align:right;}
div.nav p+p img{width:200px;height:auto;}

　これで、どんなサイズでも画面の中央に伸縮されて、一枚目は中央、二枚目は右寄せ

　まず、率直にHTMLを正しくマークアップしてみましょう。
・そのブロックはなんなのか？
・画像はそれ自体がコンテンツとして重要なのか、背景なのか？
・ふたつのリンクの違いをマークアップする。

　なお、
<div id="hoge">
<img src="img001.jpg" /><span id="hage"><img src="img002.jpg" /></span>
</div>
でしたら
div#hoge{width:50%;position:relative;text-align:center;}
div#hoge span{display:block;text-align:right;}
ですむはずです。001.jpgの画像実サイズに影響されたくないなら・・
div#hoge{width:50%;position:relative;text-align:center;}
div#hoge>img{width:90%;height:auto;}
div#hoge span{display:block;text-align:right;}