Question

我已经为我的问题寻找解决方案，但我还没有找到它我的情况是，我有一个DIV，就像一个Post的容器（对于我的一个项目，在这个帖子里面有海报头像的类，名字，时间戳，文本等）。问题在于，即使具有文本（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;
}

我看到的方式，随着文字在＆postff文本中的增长＆＃39; DIV，＆＃39; post_container＆＃39; DIV应该调整高度，因为高度设置为自动。我试过设置一个溢出：auto＆＃39; to＆＃39; post_container＆＃39;根据我在这里看到的另一个问题，但它所做的只是添加一个滚动条。我需要在没有任何脚本的情况下解决这个问题。

小提琴：http://jsfiddle.net/3ck990zc/

Answer 1

您的子元素是绝对定位的，因此它们不在内容流中，因此它们不会影响父容器的高度。尝试删除绝对定位。

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

Answer 2

你的.post_info班级有position: absolute，这使得div没有宽度和高度（这就是我想说的）。绝对位置必须仅在必要时使用。在您的情况下，这可以避免。但是既然你已经编写了很多CSS，我可以建议你使用Bootstrap类，比如row（对于外部容器，它将包装你所拥有的所有内容，具有适当的宽度和高度）和网格系统（为了放置你的colums宽度）因此）。相信是这样，知道Bootstrap是必须的，并且肯定它可以为你节省很多痛苦。

我尝试修改你的小提琴并添加一些bootstrap类并删除你的一些，最后我的JSFiddle看起来像这样： https://jsfiddle.net/obwjrbhn/2/

请注意，我一直在框架＆amp;中使用jQuery。扩展在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并在你的项目中添加本地引用。

祝你好运！

Answer 3

这是你需要做的事情首先不要绝对定位主要容器元素，而是浮动它们并且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;
}

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

3 个答案: