1.需求:宽度固定,添加内容多列元素高度相同
2.使用技术
浮动:左右元素全部向左浮动
padding-bottom:将内容高度撑大,一般设置10000px;
margin-bottom:为负值,调整元素边界,-10000px(-padding-bottom值)
overflow:父元素添加overflow:hidden;
3示例代码:
*{ padding: 0; margin: 0; }
.out{ width: 500px; margin: 0 auto; border: 2px #FF0000 solid; overflow: hidden; }
.left{ width: 200px; float: left; padding-bottom: 10000px; margin-bottom: -10000px; background-color: yellowgreen; }
.right{ width: 300px; float: left; padding-bottom: 10000px; margin-bottom: -10000px; background-color: pink; }
.clearfix:after, .clearfix:before{ content: ""; display: table; clear: both; }
.clearfix{ zoom: 1; }
