2011-08-15 54 views
1

私はいくつかのDivsを浮いているが、何らかの理由で3番目のDIVは1番目の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; 
} 
+0

'position:relative;'? – jolt

答えて

2

私は高さが設定されていないように、その、divsの高さをどうすると思います。

私はdivsの二組を分離し、それにclear divを追加し、それが動作するようになりました:また、divs上の高さを設定することができ、これがまた問題を解決するだろう

デモhere

デモhere

+0

CSSの高さを設定しました。ありがとう – Xtian

関連する問題