css漂浮，不漂浮？

Question

我有一些Divs浮動，但由於某些原因，第三個DIV不會在第一個DIV下進行。我無法弄清楚爲什麼？我認爲這與圖像有關。當圖像不在時，它們漂浮得很好。

http://jsfiddle.net/xtian/9Je65/

HTML：

<div class="dl-content"> 
      <div class="dl-content-left"> 
       <div class="content-block"> 
        <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb1.jpg" alt=""> 
        <h4 class="left">The History of Documentation</h4> 
        <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p> 
       </div> 

       <div class="content-block"> 
        <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb2.jpg" alt=""> 
        <h4 class="left">Rebuilding Ellis One Brick at a Time</h4> 
        <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p> 
       </div> 

       <div class="content-block"> 
        <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt=""> 
        <h4 class="left">Title Number 3</h4> 
        <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p> 
       </div> 

       <div class="content-block"> 
        <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt=""> 
        <h4 class="left">Title Number 4</h4> 
        <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p> 
       </div> 
      </div>  

      <div class="dl-content-right"> 
       <img src="img/thumbs/ad1.jpg" alt=""> 
      </div> 
     </div> 

CSS：

.dl-content{ 
    width:940px; 
    margin: 0 auto; 
    padding: 0 20px; 
    overflow: hidden; 
} 

.dl-content-left{ 
    width:618px; 
    float: left; 
} 

.dl-content-left .content-block{ 
    width:307px; 
    float:left; 
    margin-bottom: 20px; 
} 

.dl-content-left .content-block img{ 
    width: 139px; 
    float:left; 
    margin: 0 8px 0 0; 
} 

.dl-content-left .content-block p{ 
    float:left; 
    width:150px; 
    font-size: 12px; 
    line-height: 1.4; 
} 

.dl-content-right{ 
    float:left; 
    width: 300px; 
    margin-left: 20px; 
} 

.dl-content-right img{ 
    width: 300px; 
} 

Answer 1

我認爲它做的divs的高度，作爲一個高度尚未確定。

我加了一個clear div進去，分離兩套divs，現在可：

演示here

您還可以設置一個高度上divs，這也將解決這個問題：

演示here