probem有一個div

嗨內浮動我試圖讓我的網站的頭版包含浮動IMG和一些浮動文本H3，P和內一個div。然後，我想下面的循環使用不同的文本/ PIC股利。當我這樣做，一旦它工作正常，但容器div有沒有被拉伸以適應內容。所以當我在下面添加另一個時，它會重疊。probem有一個div

代碼：除非你告訴他們

<div id="blog"> 

    <h1>BLOG</h1> 

     <div id="postcont"> 
     <img src="blog1.png" width="40" height="40" /> 
     <h3>Playing At The Phenoix</h3> 
     <p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...<a href="bloglink.php">read more </a></p 
     > 

     </div> 

     <div id="postcont"> 
     <img src="blog1.png" width="40" height="40" /> 
     <h3>Playing At The Phenoix</h3> 
     <p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...<a href="bloglink.php">read more </a></p 
     > 

     </div> 
    </div> 


#blog { 
float:left; 
width:400px; 
border-top:#0FF solid 6px; 

} 

#postcont { 
padding:10px; 
border-top:1px #FFF solid; 
margin-top:10px; 
} 

#blog h1 { 
    font-size:20px; 
    color:#FFF; 
    padding:10px; 
    padding-left:0px; 
    letter-spacing:2px; 
} 
#blog p { 
    font-size:15px; 
    color:#FFF; 
    float:right; 
    clear:right; 
    width:300px; 
    margin-right:30px; 
    letter-spacing:2px; 
    margin-top:5px; 
} 
#blog a { 
    font-size:15px; 
    color:#FFF; 
    float:right; 
    clear:right; 
    width:300px; 
    margin-right:0px; 
    letter-spacing:2px; 
    margin-top:5px; 
    font-style:italic; 
    text-decoration:underline; 
} 
#blog h3 { 
    font-size:15px; 
    color:#FFF; 
    float:right; 
    clear:right; 
    width:300px; 
    margin-right:30px; 
    letter-spacing:2px; 
    margin-top:5px; 
    font-weight:bold; 
} 


#blog img { 
    float:left; 
    clear:left; 
}

來源

2011-08-29 Infra Stank

你能告訴我們一個演示？ – mjisrawi

顯示出與在HTML和CSS –

塊級元素，以不擴大到浮動元素的高度。你應該最後一個浮動元素後添加結算元素來解決這個問題。相反的：

 </div> 
</div>

用途：

 </div> 
     <br style="clear: both"/> 
</div>

對於這個解決方案的擴展解釋，以及一個可選的解決方案，請訪問：http://www.quirksmode.org/css/clearing.html

來源

2011-08-29 15:11:02

感謝您的div容器的代碼，偉大工程。 –

probem有一個div

回答

相關問題