首页 > 代码库 > div随内容调整高度(父元素高度随子元素变化)
div随内容调整高度(父元素高度随子元素变化)
你就说我的头像是不是很酷,很有个性?
嗯嗯,帅的不行了呢!你吃饭了吗???????????????????????????????
<style>.message { width: 100%; padding-top: 12px }
.message .icon { position: relative; display: block; padding: 0px; height: 44px; width: 44px; float: left }
.message .icon.user { margin-left: 9px; margin-right: 15px }
.message .icon.friend { margin-left: 16px; margin-right: 8px }
.message .text { display: block; width: 223px; height: auto; padding: 11px 20px 19px 17px; font-size: 14px; color: #4a4a4a; float: left }
.message .text.user { background: rgba(24,187,155,0.60); margin-left: 69px }
.message .text.friend { background: #d8d8d8; margin-right: 69px }
.clear { clear: both }</style>
<div class="message"> <img class="icon friend" src="/icon/default.ico"></img> <a class="text friend">你就说我的头像是不是很酷,很有个性?</a> <div class="clear"></div> </div> <div class="message"> <a class="text user">嗯嗯,帅的不行了呢!你吃饭了吗?</a> <img class="icon user" src="/icon/default.ico"></img> <div class="clear"></div> </div>
.message {
width: 100%;
padding-top: 12px;
}
.message .icon {
position: relative;
display: block;
padding: 0px;
height: 44px;
width: 44px;
float: left;
}
.message .icon.user{
margin-left: 9px;
margin-right: 15px;
}
.message .icon.friend {
margin-left: 16px;
margin-right: 8px;
}
.message .text {
display: block;
border-radius:10px;
width: 223px;
height: auto;
padding: 11px 20px 19px 17px;
font-size:14px;
color:#4a4a4a;
float: left;
}
.message .text.user {
background:rgba(24,187,155,0.60);
margin-left: 69px;
}
.message .text.friend {
background:#d8d8d8;
margin-right: 69px;
}
.clear {
clear: both;
}
css样式clear设为both,然后父元素的高度就会随子元素改变了
参考自 让div父元素的高度随子元素高度的变化而变化
div随内容调整高度(父元素高度随子元素变化)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。