防止浮动元素推送其他元素

Question

我的代码是：

<div class="padding5">
<div id="div1" class="float_left wh50"></div>
<div id="div2" class="float_left h50">Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.</div>                        
<div id="div3" class="float_right wh50"></div>
<div id="div4" class="float_right wh50"></div>                                                                                                                          
<div class="clear"></div>                                                 
</div>

我的CSS是这样的：

<style>
.padding5{padding:5px;}
.wh50{width:50px;height:50px;}
.h50{height:50px;}
.float_left{float:left;}
.float_right{float:right;}
</style>

现在，如果我调整窗口大小（并使其缩小），我希望div id = 2中的内容将单词分解为新行，但不是。继续推动其他元素。

Answer 1

从height课程中删除.wh50。或者将其设置为min-height: 50px;。高度声明导致div3和div4显示为未被清除。

.padding5{padding:5px;}
.wh50{width:50px;height:50px;}
.h50{min-height:50px;}
.float_left{float:left;}
.float_right{float:right;}