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;