0

我整天都在拉头发。任何帮助将不胜感激！！

我有一行 div，在 Chrome、IE 和 Safari 中，在此处放置许多行会将外部 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

或者完全移除清除元素并将溢出：隐藏添加到父容器。

div.formRow { 
    overflow: hidden;  
}

在我看来，总是更好的解决方案。

于 2012-07-24T12:51:36.427 回答