3
我已经为我的问题寻找解决方案，但是我没有找到它。
我的情况是，我有一个DIV，像一个邮政的容器（我的项目，在这篇文章里面有海报头像，名字，时间戳，文本等的类）。问题是，即使具有文本（POST_TEXT）的DIV自身的大小，这就像一个容器不DIV的，所以出现这种情况：根据孩子内部的内容调整容器DIV大小DIV
打印更好地理解：http://imgur.com/a/j2HVX#0
这是我的实际代码：
<div class="post_container">
<div class="post_who">
<div class="post_avatar"><img src="avatar2.png" /></div>
<div class="post_name">Solange Campolina</div>
<div class="post_timestamp">03/04/15<br />15:34</div>
</div>
<div class="post_info">
<div class="post_title">Trabalho sobre fotografia</div>
<div class="post_text">RANDOM PORTUGUESE WORDS: É importante questionar o quanto a determinação clara de objetivos estende o alcance e a importância de alternativas às soluções ortodoxas. A prática cotidiana prova que o início da atividade geral de formação de atitudes cumpre um papel essencial na formulação dos relacionamentos verticais entre as hierarquias. No entanto, não podemos esquecer que a contínua expansão de nossa atividade é uma das consequências das posturas dos órgãos dirigentes com relação às suas atribuições. O cuidado em identificar pontos críticos no fenômeno da Internet auxilia a preparação e a composição do orçamento setorial.<span class="post_value">Valor: 3,0 E1AMP</span></div>
</div>
<div class="post_links">
<a><div class="post_button">
<img src="icon_date.png" /><span>24/04/15</span>
</div></a>
<a href="#"><div class="post_button">
<img src="icon_attachment.png" /><span>1</span>
</div></a>
<a href="aluno_disciplinas_disciplina_comentarios.htm"><div class="post_button">
<img src="icon_comment.png" /><span>3</span>
</div></a>
</div>
<div class="post_divider"></div>
</div>
这是简化的代码，只有重要的部分：
<div class="post_container">
<div class="post_who">
<!--Content!-->
</div>
<div class="post_info">
<div class="post_title"><!--Title!--></div>
<div class="post_text"><!--Content (text goes here)!--><span class="post_value">Valor: 3,0 E1AMP</span></div>
</div>
<div class="post_links">
<!--Buttons!-->
</div>
<div class="post_divider"><!--This is the light gray line that divides the posts!--></div>
</div>
的CSS部分：
/*Relevant classes:*/
.post_container{
position: relative;
min-height: 140px;
height: auto;
}
.post_info{
position: absolute;
display: inline-block;
vertical-align: top;
margin: 20px 20px 0px 20px;
padding-bottom: 32px;
width: 550px;
}
.post_links{
position: absolute;
bottom: 5;
left: 110px;
}
.post_divider{
background-color: #e8e8e8;
height: 1px;
width: 85%;
position: absolute;
right: 0;
bottom: 0;
}
.post_text{
height: auto;
}
/*Other classes:*/
.post_who{
display: inline-block;
margin: 10px;
font-style: italic;
font-size: 1.2em;
text-align: center;
width: 75px;
}
.post_avatar{
border: 1px solid whitesmoke;
border-radius: 50%;
overflow: hidden;
width: 60px;
height: 60px;
position: relative;
bottom: 0px;
margin: 15px 0 0 5px;
}
.post_avatar img{
vertical-align: middle;
display: block;
width: 60px;
min-width: 100%;
min-height: 100%;
}
.post_name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 65px;
}
我看到，作为文本在“POST_TEXT” DIV增长的方式，“post_container” DIV应该有它的高度调节，因为高度设置作为自动。根据我在这里看到的另一个问题，我尝试将'overflow：auto'设置为'post_container'，但它所做的只是向它添加滚动条。我需要解决这个没有任何脚本。
小提琴：http://jsfiddle.net/3ck990zc/
您的子元素是绝对定位的，因此它们不在内容流中，因此它们不会影响父容器的高度。尝试删除绝对定位。 –
男人我不能相信所有这个问题只是因为这个，我试图纠正这个小时，这是真的。我真的不知道，绝对定位的元素并没有助长父母的高度。谢谢！ –