1

それ自体が下に押されたフローティング要素の周りにテキストを表示する必要があります。HTML/CSS は非常に単純です。

<div id="container">
    <div id="shim"></div>
    <div id="myimg"></div> 
    <p>This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...</p>
</div>

CSS:

#container {
    width: 200px;
}

#shim {
    float:right;
    width: 1px;
    height: 40px;
    background-color: red;
}

#myimg {
    clear:both;
    float:right;
    width: 100px;
    height: 40px;
    background-color: blue;
}

Chrome と Firefox では完全に動作しますが、Safari ではテキストが浮動要素を上書きします。

バグを示すためにフィドルを作成しました（明らかに、それを見るにはサファリが必要です）：

http://jsfiddle.net/8JLFp/

誰かが解決策を見つけたり、これを行う別の方法を提案したりできますか?

4

1 に答える 1

0

このサイトで同じ問題を確認してください。これはあなたを助けるかもしれません。

可能な解決策。

  1. clear:both div を追加してみてください
  2. オーバーフロー:非表示を使用
于 2013-03-15T10:03:44.007 に答える