防止与图像的div从LIS

Question

奇怪包装如何可以防止该奇数级联效应使用LI内容当诸如以下： http://jsfiddle.net/arPzt/1/

我可以由每个LI之后插入的BR实现所期望的行为，但）LI之间的垂直间距似乎根据内容的长度而变化，并且b）必须有一些更好/更正确的方式来实现这一点。

<ul> 
<li> 
    <div style="background-color: #990000; width:70px; float: left"> 
     <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" /> 
    </div> 
    <div style="background-color: #00FF00; margin-left: 70px;" > 
    body some interesting large amount of content. some interesting large amount of content. 
    </div> 
</li> 
<li> 
    <div style="background-color: #990000; width:70px; float: left"> 
     <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" /> 
    </div> 
    <div style="background-color: #00FF00; margin-left: 70px;" > 
    body some interesting large amount of content. some interesting large amount of content. 
    </div>  
</li> 
<li> 
    <div style="background-color: #990000; width:70px; float: left"> 
     <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" /> 
    </div> 
    <div style="background-color: #00FF00; margin-left: 70px;" > 
    body some interesting large amount of content. some interesting large amount of content. 
    </div>  
</li>  
</ul> 

Answer 1

我建议，作为作为clear:left建议的替代方案，您考虑在li元素上使用overflow:hidden。

虽然clear:left修复了这个简单的例子，但您仍然可以在列表后面的任何其他内容中出现布局问题。在li元素上使用overflow:hidden将限制任何浮动效果仅限于这些项目。

更多的信息在this article。

Answer 2

你浮动的元素，但如果你希望他们清除以前的线，你需要使用clear: left或clear: both如果你曾经使用权浮动元素。

li { 
    clear: left; 
} 

的jsfiddle：http://jsfiddle.net/arPzt/3/

Answer 3

我相信你需要做的仅仅是清除每个李

筛选后的 '浮动' 的内容：

<li style="clear:both;">