div随内容调整高度(父元素高度随子元素变化)

Posted dy blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div随内容调整高度(父元素高度随子元素变化)相关的知识,希望对你有一定的参考价值。

  

 

<div style="width: 360px;">
<div class="message"><img class="icon friend" src="//pic.cnblogs.com/avatar/814901/20170506112856.png" alt="" /> <a class="text friend">?????????????????????????????????????????</a>
<div class="clear">&nbsp;</div>
</div>
<div class="message"><a class="text user">akldjsfasklsdajflkasdjflksadjflksadjfsadkljfasjdkl</a> <img class="icon user" src="//pic.cnblogs.com/avatar/814901/20170506112856.png" alt="" />
<div class="clear">&nbsp;</div>
</div>
<div class="message"><img class="icon friend" src="//pic.cnblogs.com/avatar/814901/20170506112856.png" alt="" />
<p class="nickname">dy</p>
<a class="text friend">???????</a>
<div class="clear">&nbsp;</div>
</div>
</div>
html

 

.message {
    position: relative;
    width: 100%;
    padding-top: 12px;
}
.message .icon {
    position: absolute;
    display: block;
    height: 44px;
    width: 44px;
    top: 12px;
}
.message .icon.friend{
    left: 9px;
}
.message .icon.user{
    right: 8px;
}
.message .text {
    position: relative;
    display: block;
    border-radius:10px;
    max-width: 223px;
    height: auto;
    padding: 11px 20px 19px 17px;
    font-size:14px;
    color:#4a4a4a;
    resize: none;
    word-break: break-all;/*自动换行*/
    word-wrap: break-word;/*以单词换行*/
    white-space: pre-wrap;
    float: left;
}
.message .text.user {
    background:rgba(24,187,155,0.60);
    right: 69px;
    float: right;
}
.message .text.friend {
    background:#d8d8d8;
    left: 69px;
}
.message .nickname {
    margin: 0;
    padding: 0;
    font-size:12px;
    color:rgba(0,0,0,0.54);
    width:223px;
    line-height:20px;
    left:69px;
}
css

 

 

css样式clear设为both,然后父元素的高度就会随子元素改变了

块内icon用绝对位置,不会对相对位置的块造成影响

 

参考自 让div父元素的高度随子元素高度的变化而变化

 

以上是关于div随内容调整高度(父元素高度随子元素变化)的主要内容,如果未能解决你的问题,请参考以下文章

子DIV浮动(float)后父DIV高度自动失效解决方案

两个DIV,父元素相对定位没有设置高度,子元素绝对定位高度随内容变化,此无法撑开父DIV

css设置时父元素随子元素margin值移动

父div宽度不设定 子div宽度是固定值 想让父div居中显示且宽度随子div增多而增加 并且子div是居左显示

js监听某个元素高度变化来改变父级iframe的高度

div子元素无法调整