Question

我一整天都在拔头发。任何帮助将非常感谢!!

我有一排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;
}

非常感谢您的任何帮助

Answer 1

不要在最后使用<br/>，而是将其设为<div></div>。

请参阅this jsfiddle LIVE DEMO

替换...

    <br class="clear">

使用...

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

并替换......

br.clear {
  clear:both;
}

使用...

div.clear {
  clear:both;
}

Answer 2

或者完全删除清除元素并将overflow：hidden添加到父容器中。

div.formRow { 
    overflow: hidden;  
}

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

Div标签没有在IE中扩展..在所有其他浏览器中都可以

2 个答案: