伪等高布局

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; }