教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337
写的很好。自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱。
学到的知识是:clear:both;
清除当前定义的元素左右浮动
诸如:
clear:left; //清除左浮动
clear:right; //清除右浮动
clear:both; //清除左右两边浮动
自己敲后的代码
@charset ‘utf-8‘;
.con{
width:200px;
height:400px;
background-color:#f8f8f8;
.item{
clear:both;
.image-con{
float:left;
img{
width:50px;
height:50px
}
}
.msg-con{
background-color: olive;
float:left;
margin:0 20px 10px 15px;
padding:10px;
padding-left:0;
border-radius:7px;
img{
width:50px;
height:50px
}
}
}
}
html
message
message
message
.item 的高度还是0,但是它会正常的排好。
原文:http://www.cnblogs.com/wang-jing/p/4930248.html