自動高度DIV不工作

我試圖讓一個div自動調整大小的高度取決於它的內容：自動高度DIV不工作

<div id = "bar2"> 
     <div id = "breadcrumbs"><p>Home &nbsp;>&nbsp; About</p></div> 
     <div id = "anterialtitle"><h1>About</h1></div> 
     <div id = "rightblockant"><img src = "img/about.jpg" alt = "About Image | Alternative Text" width = "300" height = "200"/><p class = "firstpara">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><br/></div> 
     <div id = "leftblockant"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</p></div> 
     </div> 
     </div> 
    <div id="footer"> 
       <p><a href ="">About</a>&nbsp;|&nbsp;<a href = "">Contact Us</a>&nbsp;|&nbsp;<a href = "">Shipping Information</a>&nbsp;|&nbsp;<a href = "">Returns Policy</a>&nbsp;|&nbsp;<a href = "">Terms & Conditions</a>&nbsp;|&nbsp;<a href = "">Privacy Policy</a></p> 
      <p>&copy; 2011 <a href="" target="_blank">Everry London</a>. All rights reserved.</p> 
     </div> 



#bar2{ 
    width:960px; 
    height: auto; 
    position:relative; 
    margin:0 auto; 
    border-left:1px solid #cccccc; 
    border-right:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    border-top:5px solid #313131; 
    margin-top:15px; 
    margin-left:4px;  
}

然而，這是結果：

www.everry.com/新/ home/about.html

它只封裝h1而不是img或p標籤。爲什麼這是？

來源

2011-10-20 user559142

漂浮物。當你在一個div裏面浮動內容而你沒有「清除」時，它會這麼做。

您可以通過在浮動元素的末尾添加div元素與clear:both來解決此問題，或者您可以將overflow: hidden添加到.bar2。

我建議你也在Google上搜索clearfix以獲得更好的解決方案。

來源

2011-10-20 09:01:11 MarioRicalde

嘗試float:left;的ID 'BAR2'

來源

2011-10-20 09:04:25 Dev

這項工作......但爲什麼> ??? – user559142

float將元素從正常頁面流中取出。 – Dev

你關閉一個div來得多

<div id = "leftblockant"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</p></div> 
    </div> 
    </div>

編輯：對不起，我現在看到了您的網頁，這是爲頭格我是對不起

來源

2011-10-20 09:05:01 Neo

謝謝！但這不是問題！ – user559142

自動高度DIV不工作

回答

相關問題