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

Question

我已经为我的问题搜索了解决方案，但没有找到。
我的情况是，我有一个 DIV 作为 Post 的容器（对于我的一个项目，在这个 post 里面有类作为 poster 头像、姓名、时间戳、文本等）。问题是，即使具有文本 (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 应该调整其高度，因为高度设置为汽车。根据我在这里看到的另一个问题，我尝试将 'overflow: auto' 设置为 'post_container'，但它所做的只是向其添加一个滚动条。我需要在没有任何脚本的情况下解决这个问题。

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

Answer 1

首先你需要做的是不要绝对定位主容器元素，而是浮动它们，内部 div 可以绝对定位，参见调整 css:

/*Relevant classes:*/

.post_container{ 
position: relative;
min-height: 140px;
height: auto;
}       
.post_info{
display: inline-block; 
vertical-align: top; 
margin: 20px 20px 0px 20px; 
padding-bottom: 32px; 
width: 550px;
float:left;
}
.post_links{
position: absolute;
bottom: 5;
left: 110px; 
}
.post_divider{ 
background-color: #e8e8e8;
height: 1px; 
width: 85%; 
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; 
float:left;
}
.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;
}

Answer 2

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

参考：http://www.w3.org/TR/CSS21/visuren.html#choose-position

Answer 3

你的 .post_info class 有 position: absolute 这使得 div 没有宽度和高度（这就是我喜欢说的）。绝对位置只能在必要时使用。在您的情况下，这是可以避免的。但是因为你已经写了很多 CSS，我建议你使用 Bootstrap class 之类的行（对于外部容器，它会用适当的宽度和高度包裹你里面的所有东西) 和网格系统（以便相应地放置列宽）。相信，现在知道 Bootstrap 是必须的，它肯定可以为您省去很多痛苦。

我尝试修改您的 fiddle 并添加一些 bootstrap class 并删除您的一些，最后我的 JSFiddle 如下所示： https://jsfiddle.net/obwjrbhn/2/

请注意，我一直在 Frameworks & Extensions 中使用 jQuery 在左侧的 External Resources 中添加引用bootstrap.js 和 bootstrap.css 的菜单。你可以通过在你的头脑中添加这些来将它们添加到你的项目中：

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

但这会使您的网站加载缓慢，所以我建议下载 jQuery 和 bootstrap 并在您的项目中添加本地引用。

祝你好运！

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

Resize container DIV size according to content inside child DIV

html

css

size