DIVタグについて

質問

DIVタグのstyleで二つの画像を左右の端に標示することは可能でしょうか？

floatでleftを指定すると当然、二つの画像が左端に寄ってしまいました。

DIVのwidthで指定した幅の左右に標示させたいんです。

回答No.3

ORUKA1951

質問文に
＞DIVタグのstyleで二つの画像を左右の端に標示することは可能でしょうか？
と書かれていて
＞しかし、ショッピングモールなんでスタイルシートが使えないんです。
って矛盾してますけど・・・

外部スタイルシートは使えないけど、style属性でのスタイルシートが使えるなら

＿<ul style="display:block;margin:0;padding:0;list-style:none;text-align:center;">
＿＿<li style="display:block;margin:0;padding:0;list-style:none;"><img src="./images/1.jpg" width="360" height="270" alt="ノートの全体写真">
＿＿＿<p style="display:inline;margin-left:10px;"><img src="./images/1-1.jpg" width="360" height="270" alt="中央を拡大した写真"></p>
＿＿</li>
＿＿<li style="display:block;margin:0;padding:0;list-style:none;"><img src="./images/2.jpg" width="360" height="270" alt="ノートの全体写真右">
＿＿＿<p style="display:inline;margin-left:10px;"><img src="./images/2-1.jpg" width="360" height="270" alt="右部分を拡大した写真"></p>
＿＿</li>
＿</ul>

回答No.2

ORUKA1951

デザインのためにHTMLを書くんじゃありません。!!!
発想がまるで逆転している。HTMLは文書構造を記述するもの、スタイルシートはそのプレゼンテーションを記述するもの。

　たとえば、HTMLが
＿<ul class="photoList">
＿＿<li><img src="./images/1.jpg" width="360" height="270" alt="ノートの全体写真">
＿＿＿<p><img src="./images/1-1.jpg" width="360" height="270" alt="中央を拡大した写真"></p>
＿＿</li>
＿＿<li><img src="./images/2.jpg" width="360" height="270" alt="ノートの全体写真右">
＿＿＿<p><img src="./images/2-1.jpg" width="360" height="270" alt="右部分を拡大した写真"></p>
＿＿</li>
＿</ul>

とかでしたら、タブは＿に置換してあります。

スタイルシートで
ul.photoList,ul.photoList li{
display:block;margin:0;padding:0;list-style:none;
text-align:center;
}
ul.photoList li p{display:inline;margin-left:10px;}
とかでよい。

いや、全体写真にマウスを載せたときだけ表示したけりゃ、スタイルシートを
ul.photoList,ul.photoList li{
display:block;margin:0;padding:0;list-style:none;
}
ul.photoList{position:relative;}
ul.photoList li{margin-bottom:10px;}
ul.photoList li img{width:180px;height:auto;display:block;}
ul.photoList li p{display:none;}
ul.photoList li:hover p{display:block;margin:0;position:absolute;top:0;left:180px;}
ul.photoList li p img{padding-left:20px;width:360px;}

とすればよい。デザインのためにHTMLが書かれていないから、好きなようにデザインできます。サムネイルを横に並べることも簡単・・

　HTMLは文書構造だけ、スタイルシートはその文書構造を利用してプレゼンテーションを決めるもの・・・最も重要なことです。

補足

凄く丁寧な回答誠に感謝します。

しかし、ショッピングモールなんでスタイルシートが使えないんです。

回答No.1

t_ohta

<div><img style="float:right;" src="右側画像"><img style="float:left;" src="左側画像"></div>