1.需求:寬度固定,添加內(nèi)容多列元素高度相同

2.使用技術(shù)

? ? ? ? ? ? 浮動(dòng):左右元素全部向左浮動(dòng)

? ??????????padding-bottom:將內(nèi)容高度撐大,一般設(shè)置10000px;

? ??????????margin-bottom:為負(fù)值,調(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; }