0

私はこれで一日中髪を引っ張っています。どんな助けでも大歓迎です!!

Chrome、IE、Safari には div の行があります。ここに多くの行を配置すると、展開されたコンテンツに合わせて外側の div (.formRow) が高くなります。IE では、div.formRow は同じサイズのままで、コンテンツdiv.formRow の下に移動します。私はすべてを試しました..誰もが何かアイデアを持っています...

ここに私のHTMLがあります：

<div class="formRow clear">
    <div class="leftCell">
        This is on the left<br>
        This is a new line<br>
        In FF and Chore, these new lines push the outer div down<br>
        In IE, theselines just go over the botto of the outer div and it doesn't expand
    </div>
    <div class="rightCell">
        This is on the right
    </div>
    <div class="rightNote">
        X
    </div>
    <br class="clear">
</div>

これは、この HTML の CSS です。

br.clear {
    clear:both;
}
div.formRow {
    border-bottom: 1px solid #e4e4e4;
    padding:20px;
    font-size:11px;
    color:#6a6a6a;
}
div.formRow div.leftCell {
    width: 73%;
    float:left;
}
div.formRow div.rightCell {
    width: 20%;
    float:left;
}
div.formRow div.rightNote {
    width: 7%;
    float:left;
}

助けてくれてありがとう

4

2 に答える 2

1

<br/>最後にa を使用する代わりに、別の にし<div></div>ます。

この jsfiddle LIVE DEMOを参照してください

交換...

    <br class="clear">

と...

    <div class="clear"></div>

そして交換…

br.clear {
  clear:both;
}

と...

div.clear {
  clear:both;
}
于 2012-07-24T12:37:09.183 に答える
1

または、クリア要素を完全に削除し、overflow:hidden を親コンテナーに追加します。

div.formRow { 
    overflow: hidden;  
}

私の意見では、常にはるかに優れたソリューションです。

于 2012-07-24T12:51:36.427 に答える