1.需求:寬度固定,添加內(nèi)容多列元素高度相同
2.使用技術(shù)
? ? ? ? ? ? 浮動:左右元素全部向左浮動
? ??????????padding-bottom:將內(nèi)容高度撐大,一般設置10000px;
? ??????????margin-bottom:為負值,調(diào)整元素邊界,-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; }
