防止與圖像的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;">