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"> </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"> </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"> </div> </div> </div>
.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样式clear设为both,然后父元素的高度就会随子元素改变了
块内icon用绝对位置,不会对相对位置的块造成影响
以上是关于div随内容调整高度(父元素高度随子元素变化)的主要内容,如果未能解决你的问题,请参考以下文章
两个DIV,父元素相对定位没有设置高度,子元素绝对定位高度随内容变化,此无法撑开父DIV