div的高度

Question

div的高度

我試圖根據其內容設置div的大小。 請參閱完整代碼here。 基本上我的問題是在div：內容

在HTML代碼來查找註釋：錯誤

有不得不添加標記P，我給它一個明確的DIV對準結束。 沒有這個清晰的，div會切割圖像。

其實我不知道只是一個更好的方法來完成這項任務。

似乎有一個很好的地方p沒有任何東西只有一個明確的類，使這個問題不會發生。 你推薦我什麼？有更好的方法來完成這項任務？

的目標是不要讓繩子DIV內容：

的Html

<div id="header"> 
    <div class="headerLeft" /> 
</div> 

<div id="waycontact"> 
    <div class="contactPaula"> 
     <p>paulaMACHADO</p> 
     <p>crea 11111/D-MG</p> 
     <p>(00) 0000 0000</p> 
    </div> 
    <div class="contactBeatriz"> 
     <p>beatrizDAMAS</p> 
     <p>crea 22222/D-MG</p> 
     <p>(00) 0000 0000</p> 
    </div> 
    <div class="address"> 
     <p>av. xxxxxxxl, yyy, sl. zzz, centro - belo horizonte - mg</p> 
     <p>cep: 00000-000 - telefax: (00) 0000 0000</p> 
     <p><a href="mailto:xxxxx@yyyy.com.br">xxxxx@yyyy.com.br</a></p> 
    </div> 
</div> 

<div id="content"> 
    <img class="left" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" /> 
    <h2>Sobre a empresa</h2> 
    <p>A AMSD é focada em qualidade..</p> 
    <p class="clear" /> <!--Wrongly!! --> 
</div> 

<div id="footer"> 
    <a class="current" href="#">home</a> 
    | 
    <a href="#">quem somos</a> 
    | 
    <a href="#">blog</a> 
    | 
    <a href="#">na mídia</a> 
    | 
    <a href="#">fale conosco</a> 
</div> 

CSS

body 
{ 
    font-size: 0.87em; 
    font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif; 
    margin: 0; 
    padding: 0; 
    color: #666666; 
} 

a:link 
{ 
    color: rgb(124,71,111); 
    text-decoration: underline; 
} 
a:visited 
{ 
    color: rgb(41, 12, 36); 
} 
a:hover 
{ 
    color: rgb(91,25,79); 
    text-decoration: none; 
} 
a:active 
{ 
    color: #AB6D9C; 
} 

p 
{ 
    margin:2px; 
} 

ul 
{ 
    list-style-type: square; 
} 
li 
{ 
    line-height: 165%; 
} 
div#header 
{ 
    width:1024px; 
    margin:5px auto; 
    height:150px; 
    background-color: rgb(91,25,79); 
} 
div.headerLeft 
{ 
    height:100%; 
    width:900px; 
    border-right:10px solid rgb(169, 171, 174); 
    background-color: rgb(124,71,111); 
} 
div#footer 
{ 
    margin-top:10px; 
    text-align:center; 
    position:relative; 
    font-size: 1.27em; 

} 
div#content 
{ 
    margin:auto 40px; 
    width:200; 
    border:2px solid red; 
} 


/* Others 
-----------------------------------------------------------*/ 
div.contactPaula p, div.contactBeatriz p 
{ 
    padding:0px; 
    margin:0px; 
} 
div.contact, div.contactPaula, div.contactBeatriz 
{ 
    margin-bottom:15px; 
    margin-top:0px; 
} 
div.contactBeatriz 
{ 
    float:right; 
    text-align:right; 
} 
div.contactPaula 
{ 
    float:left; 
    text-align:left; 
} 

div.address 
{ 
    text-align:center; 
    margin-bottom:30px; 
} 

div#waycontact 
{ 
    width:340px; 
    margin:20px 40px; 
} 
.clear, div.address, div#footer, div#waycontact 
{ 
    clear:both; 
} 
.left 
{ 
    float:left; 
} 

a.current 
{ 
    font-weight:bold; 
} 

Answer 1

添加一個 「溢出：隱藏;」到div＃的內容，所以它看起來像下面這樣。您不需要單獨的清除屬性和p標籤。祝你好運:)

div#content 
{ 
    margin:auto 40px; 
    width:200; 
    border:2px solid red; 
    overflow:hidden; 

} 

Answer 2

爲了使容器擴大，以填補浮動元素，給它是一個溢出屬性：

div.wrapper { 
    overflow: auto; 
} 

Answer 3

比使用空<div class="clear">更好的方法是使用'cearfix'方法。

這是直接從HTML5Bolierplate 借來的一個例子，只是將它應用到給您帶來麻煩的div上。

在你的情況#content將成爲#content.clearfix

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. 
    j.mp/bestclearfix */ 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ 
.clearfix { zoom: 1;