css - 1 行に 2 つの div がある場合の CSS IE の問題

Question

FFで次のコードが正常に機能しています。ご想像のとおり、次の 2 つの div は、ブラウザーのサイズ変更時に壊れることなく 1 行に収まるようにします。

<div style="float: left;  margin-right: 10px; ">

</div>

<div style="overflow: hidden;">

</div>

しかし、いつものように、IE 9 でページをテストしたとき、右の div はすでに左の div の下にありました。

誰かここで私を助けてくれませんか、ありがとう、

Answer 1

別のdivでラップする

<div>
   <div style="float: left;  margin-right: 10px; ">

   </div>

   <div style="float:right; overflow: hidden;">

   </div>
</div>

Answer 2

正常に動作しています

より多くの構成が必要な場合

<div style="display:table-row;">
 <div style="width:49%; margin-right:2%; height:100px; float:left; display:table-cell;"> any thing you wanted  </div>
 <div style="width:49%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
</div>

Answer 3

コンテナ div を使用し、2 つの div をページの合計幅の % または合計 px に設定します。

#containerdiv {
width:100%;
overflow:hidden;
}
#leftdiv {
width:20%;
overflow:hidden;
float:left;
#rightdiv {
width:80%;
overflow:hidden;
float:left;
}


<div id="containerdiv">
<div id="leftdiv"> TEST </div>
<div id="rightdiv"> TEST </div>
</div>

マージンとパディングを使用する場合は、次に並べるためにパーセンテージまたはピクセルを調整する必要があることに注意してください。例えば。左の div に 1% のパディングを追加すると、コンテナ div の幅の合計が 101% になるため、右の div が 2 行目に押し下げられます。

Answer 4

あなたもfloat他の人div

<div style="float: left;  margin-right: 10px; ">

</div>

<div style="float:right; overflow: hidden;">

</div>

================================================== ========>>>

アップデート

HTML

<div class="marginRight"></div>
<div></div>

CSS

div {
    float:left;
    border:1px solid red;
    width:45%;
    height:100px;
}
.marginRight {margin-right: 10px;}

ワーキングデモ

Answer 5

"float:right2 番目の div に " を追加するか"width:XXpx"、最初の div に追加します。