CSSにおいて、画像とテキストの配置（回り込み）について

質問

ＣＳＳ＋ＨＴＭＬによって、ＨＰを作成しております。

ＨＰ作成ソフトはDream Weaver8です。

画像をテキストの左に回りこませる技術。
（例）
■■■■　テキストテキスト
■画像■　テキストテキスト
■■■■　テキストテキスト

はスタイルシートで、画像にスタイルシートの
ボックスのfloat定義でleftをつけて

<div class="header" id="pageName">
<div id = "left"></div>
<span class="style3">テキスト</span><br/>
</div>

このように設定すればよいのかと思ったのですが
（headerは外部スタイルシートで、読み込み）
十分に画像をおくスペースがないと、
画像に、テキストがかぶってしまう場合や、（レイヤーが働いてしまう。）うまく、回り込まないのですが、どの設定が足りないのでしょうか。
ちなみにたっぷりとスペースをとった、ｄｉｖですと、
回り込ませることができたりしましたが、メニューdivなど
小さいスペースや縦幅が足りないとだめなのでしょうか。
画像のレイヤーの解除指定などをした方がよろしいのでしょうか。

まだ、初心者ですが、もし、ヒントだけでも、教えていた
だけますと幸いです。

回答No.2

goulan · ベストアンサー

まず、floatは「回り込み」ではなく、「浮動」です。
このソースで言うと、
<div class="header" id="pageName"> である親に対して、子の<div id="left">を 「浮かせて」います。float: left;は、「可能な限り左に、可能な限り上に」つまり、可能な限り左上に浮動します。その結果、他子要素が、回り込むように見える、ということなのです。

子要素である画像を左にfloat、その右にテキストを配置したい場合、floatは幅指定が必須ですので、画像の幅を指定しなくてはなりません。img要素に直接幅指定を入れるか、div#left に幅を指定してください。高さも指定したほうが安全でしょう。

それと、テキストを <span> でマークアップなさってますが、出来れば block要素（p,div など）にした方が安全です。子要素にfloat指定した場合、浮いてしまうため、本来親要素が含んでいた高さ（＝浮動した子要素の高さ）を失います。IE,Firefox,Opera,safari等、 それぞれその解釈が異なり、親要素の表示が変わるのです。

このソースの場合、さほど影響はないと思いますが、背景画像など利用なさると顕著にでます。御自分で確かめるならば、background-color をそれぞれの子要素、親要素に指定すれば、ブラウザの解釈の違いを確認できます。異なるブラウザを利用なさってないならば、float,浮動、バグ、などで検索なされば、画像または絵つきの詳しい解説ページが見つかると思います。

お礼

<div class="header">
<p class = "titleleft">
<img src="moblietitle150_75.jpg" width="150" height="75" >
</p>
<p class="style3">テキストテキスト</br>
テキストテキスト</br>
テキストテキスト</br></p>
</div>

という形に変更して、divというblock要素を外枠に、
中に２つのblock要素を設けました。
そのときにblock要素の２つの縦幅を完全にあわせる。
横幅も、外枠の幅を意識しながら2つの幅を調整する。
ことに気をつけたところ、うまくいきました。

縦の長さが違ったりすると、とたんにスタイルが崩れて
しまう所が非常に難しいところですね。

数日、悪戦苦闘していたものに光が見えてまいりました。
ありがとうございました。

回答No.3

mat-21

直接タグにCSSを入れて例を挙げておきます。

<div style="width:500px">
<div style="float:left; width:250px"><img src="xxx.jpg" width="250" height="250"></div>
<div style="float:left; width:250px">
<p>テキスト</p>
</div>
<br style="clear:left">
</div>

お礼

tagの例ありがとうございます。
ブロック要素のdivで囲んで、並べる事で、順に並ぶように
なるわけですね。
div,p,spanの用途の違いが理解することができました。
ありがとうございました。

<br style="clear:left">をすると、回り込む事なく、
通常のブロック要素の下にテキストが続くことになりますね。

ありがとうございました。

回答No.1

noname#56851

画像に float:left が指定してあれば、それを<div id = "left"></div>の中に入れなくても大丈夫です。

お礼

画像に直接、tagで指定するということですね。
ありがとうございました。