0

固定幅の親divがあり、その中にタグ付きの画像が右に浮かんでいます。

<div style="width: 200px;" class="buggybox imgr" id="g0">
    <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>

テキストが画像を包み込むことを期待して。

残念ながら、IE7は親divのRHS境界の外側に画像をフロートさせます（http://horticulture127.massey.ac.nz/ie7view.pngを参照）が、FFとSafariは親divの境界内にフロートとラップされたテキストを表示します（黒垂直線は、親divのLHS/RHS境界です。

このCSS障害を修正するにはどうすればよいですか？正しいフロートに関するIE6/7の問題について入手できる情報が非常に多いため、私は完全に圧倒され、解決策を見つけることができません。

.imgr{
    float: right;
    margin: 4px 0 4px 10px;
    padding: 4px;
    clear: right;
}
* html .buggybox {height: 1%;}

（imgposrはcssアイテムではありません-一部のjqueryのセレクターです）

4

3 に答える 3

0

position:relative;親要素に追加する必要があります。

于 2009-10-13T22:05:33.083 に答える
0

何らかの理由で「バギーボックス」の幅を 1px に設定しているようです。それが、あなたが説明しているものに似た結果を得ることができた唯一の方法です。

可能であれば、問題を含むより完全なコードを投稿していただけますか? 無関係なものをすべて削除して、コードをできるだけ短くするようにしてください。次のコード設定がありますが、これはあなたが望むことだと思います。

1 px の幅を .imgr div に追加すると、(Firefox と IE の両方で) あなたが提供した画像と同じ結果が得られます。そのため、問題があると思われます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#parent {
    width: 600px;
    border: 1px solid black;
}

.imgr{   
    float: right;    
    margin: 4px 0 4px 10px;    
    padding: 4px;    
    clear: right;
}
</style>
</head>
<body>
<div id="parent">
    <div class="buggybox imgr" id="g0">
        <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien libero, eget interdum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum interdum dui ac ultrices. Donec pulvinar feugiat nibh, sit amet rhoncus sapien consectetur quis. In orci ante, bibendum sit amet euismod eu, tristique ac erat. Donec in enim nisl. Etiam vestibulum scelerisque purus, et fringilla nibh malesuada sit amet. Praesent magna mi, egestas quis commodo a, vulputate ut sem. Nullam auctor vulputate justo, vel pharetra lectus pulvinar eget. Curabitur dignissim lectus nec ligula rutrum et pellentesque metus auctor. Sed metus diam, aliquet non malesuada vitae, tincidunt sit amet augue. Aliquam luctus posuere eros, non adipiscing ante varius sed. 
</div>
</body>
</html>

お役に立てれば！

于 2009-06-06T21:20:59.570 に答える
-1

次のことを試すことができます。

.imgr {
    overflow:auto;
}
于 2009-06-06T13:16:59.707 に答える