html - 根据子 DIV 中的内容调整容器 DIV 大小

Question

我已经为我的问题搜索了解决方案，但没有找到。
我的情况是，我有一个 DIV，它充当帖子的容器(对于我的一个元素，在这篇帖子中有海报头像、名称、时间戳、文本等的类)。问题是，即使具有文本 (post_text) 的 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 应该调整其高度，因为高度设置为自动。根据我在这里看到的另一个问题，我尝试将“溢出:自动”设置为“post_container”，但它所做的只是向其添加一个滚动条。我需要在没有任何脚本的情况下解决这个问题。

fiddle :http://jsfiddle.net/3ck990zc/

Answer 1

你的子元素是绝对定位的，所以它们在内容流之外，所以它们不会影响父容器的高度。尝试删除绝对定位。

引用:http://www.w3.org/TR/CSS21/visuren.html#choose-position