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