※ ChatGPTを利用し、要約された質問です(原文:CSSのボックス表示の違いについて)
CSSのボックス表示の違いについて
このQ&Aのポイント
CSSのボックス表示における左右配置の違いと問題点について解説します。
ボックスの中身が長い場合、IEでは右ボックスの中身が左ボックスの下に表示されてしまう問題が発生します。
一方、FFとSafariではボックスの中身が増えても右ボックスが下に伸びていくだけで、回り込みは起こりません。
現在、以下のようなボックス配置を作っています。
|ボックス左||ボックス右|
<div class="clear"></div>
|ボックス左||ボックス右|
<div class="clear"></div>
|ボックス左||ボックス右|
ボックス左は左フロート
ボックス右は右フロート
にしてあります。
どちらも幅は250pxにしていしてあります。
そして、その中にこのように文章と画像を入れていきたいのですが、
|画像1 ||文章 |
| ||画像2 |
<div class="clear"></div>
実際にやってみると、ボックスの中身の長さが右の方が長い場合、
|画像1 ||文章 |
|画像2 || |
<div class="clear"></div>
このように、画像2が左のボックスの下に表示されてしまうのです。
FFとSafariならこのように
|画像1 ||文章 |
|画像2 |
|文章 |
|画像3 |
<div class="clear"></div>
どれだけ中身を増やしても、右のボックスが下に伸びて縦長になっていくだけなのですが、どうしてIEだと上のように隣のボックスの下に画像や文章が回り込んでしまうのでしょうか。どうしてもわかりません。
|画像1 ||文章 |
|画像2 ||画像2 |
|画像3 ||文章 |
|画像4 ||画像3 |
<div class="clear"></div>
このように、左のボックスにも中身がある場合は右ボックス内のものは下に回り込みません。
何がいけないのかわかりません。おしえてください。
よろしくお願いします。
お礼
ご回答ありがとうございます。 ご指摘の通り、マージンと余白の解釈がIEだけ違っていたので、 250pxのボックス内に収まるはずの画像でも、はみ出たことになってました。 ありがとうございました。