多栏等高布局（负margin的障眼法）

多栏等高布局（负margin的障眼法）

2019独角兽企业重金招聘Python工程师标准>>>

• 采用负margin html:

<div class="box"><div class="app1"><p>阿达撒撒发顺丰看看剧咖啡店</p><p>阿达撒撒发顺丰看看剧咖啡店</p></div><div class="app2"><p>上过课大概多少咖喱深V麻烦点卡萨丁</p><p>当咖啡开工饭是女方</p><p>当咖啡开工饭是女方</p><p>当咖啡开工饭是女方</p><p>当咖啡开工饭是女方</p></div><div class="app1"><p>阿达撒撒发顺丰看看剧咖啡店</p><p>阿达撒撒发顺丰看看剧咖啡店</p></div>
</div>

css:

 *{margin: 0;padding: 0;}.box {margin: auto;max-width: 600px;overflow: hidden;/*隐藏起子元素超出的部分*//*box的高度有app1和app2中最大的那个决定*/}.app1, .app2 {margin-bottom: -99999px;/*这样足够大*/padding-bottom: 99999px;width: 30%;float: left;}.app1 {background-color: red;}.app2 {background-color: blue;}

• 采用table-cell，缺点是不能兼容ie8以下 html：

<div class="box"><div class="son item1"><p>123</p><p>123</p><p>123</p></div><div class="son item2"><p>456</p><p>456</p><p>456</p></div><div class="son item3"><p>789</p><p>789</p></div>
</div>

css:

 * {margin: 0;padding: 0;}.box {display: table;width: 300px;}.son {display: table-cell;/*不能兼容ie8以下*/}.item1{background-color: red;}.item2{background-color: blue;}.item3{background-color: red;}

转载于: