0

私は自分の問題を十分に明確に説明することがまったくできないので、http: //jsfiddle.net/Emf2f/で jsfiddle をできるだけシンプルにしようとしました。Chrome + IE では、私の画像は #div3 の下にありますが、Firefox では #div3 の隣にあります。なぜこれが起こるのですか？どちらの結果がより「標準的」ですか?

<div id="div1">
    <div id="div2">
        <div id="div3"> Text </div>
    </div>
    <img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>

#div1{
    width:500px;
    overflow:auto;
    border:1px solid red;
}
#div2{
    margin-bottom:-1px;
}
#div3{
    background:cyan;
    float:left;
    width:200px;
    height:100px;
}
4

2 に答える 2

1

画像をインラインで表示したくないオブジェクトの周りに「クリア」を使用します。ポジショニングについて詳しくは、http ://w3schools.com/css/css_float.asp をご覧ください。

このサイトには、あなたが達成しようとしている正確な例があります.

画像を div タグ (div4) に追加し、clear:both をその div の css ファイルに配置すると、Chrome、IE、および FF で適切に動作します。

div4{クリア:両方;}

これが役立つかどうか教えてください。ありがとう。

于 2013-06-28T14:29:57.740 に答える
0

コンテンツの観点から見ると、img(HTML 仕様に従って) インラインを表示することはすべて同じことですが、異なるのはデフォルトのオーバーフロー動作です。Chrome と IE では、テキストごとにラップされます (これは実際には正しい動作だと思います) が、Firefox はそうではありません。画像を常に下に表示する場合は、次のようにマークします。display:block;

于 2013-06-28T14:19:39.277 に答える