css布局之等高布局

等高布局：

一、假等高布局

　　原理：利用内外边距相抵消，注意父元素设置"overflow:hidden"，列变宽，其他列等高变化

　　优点：结构简单，兼容所有浏览器

　　缺点：伪等高，需要合理控制margin和padding值配合

1 <div class="parent">
2         <div class="box1">
3             <p>111111</p>
4         </div>
5         <div class="box2"></div>
6 </div>

css样式：

 1 .parent {
 2             margin: 0 auto;
 3             border: 10px black solid;
 4             overflow: hidden;
 5         }
 6         
 7         .box1 {
 8             float: left;
 9             width: 100px;
10             background-color: red;
11             margin-bottom: -2000px;
12             padding-bottom: 2000px;
13         }
14         
15         .box2 {
16             float: right;
17             width: 150px;
18             background-color: blue;
19             margin-bottom: -2000px;
20             padding-bottom: 2000px;
21         }

二、真等高布局（还未理解...待续）