css等高布局的两种方式

1. 利用子元素的padding-bottom:3000px;,margin-bottom:-3000px;来填充空间，这种方式需要注意的是，子元素必须设置基线为topvertical-align:top;不然子元素不会顶对齐

   .listBox{
     overflow:hidden;
   }
   .listBox div{
     vertical-align:top;
     display:inline-block;
     width:100px;
     margin-right:10px;
     padding-bottom:3000px;
     margin-bottom:-3000px;
   }
   .listBox div{
     width:100px;
     margin-right:10px;
   }
   .div1{
     background:red;
   }
   .div2{
     background:blue;
   }
   

   子元素div2的内容比div1的内容多，高度就高

   
     
   
       
   1dgdfg地方干部豆腐干豆腐干豆腐干豆腐干豆腐干当时法国士大夫士大夫十分士大夫士大夫
       
   2撒旦发射点1dgdfg地方干部豆腐干豆腐干豆腐干豆腐干豆腐干当时法国士大夫士大夫十分士大夫士大夫2撒旦发射点1dgdfg地方干部豆腐干豆腐干豆腐干豆腐干豆腐干当时法国士大夫士大夫十分士大夫士大夫
     
   
   

   效果如图所示：内容大小不一样，但是高度一样
   
   等高布局填充空间方式
   
   其实子元素除了用display:inline-block方式之外，也可以用浮动的方式float:left，这样就会自动顶对齐，不用设置基线了，但是父级得清除浮动

   .listBox:after{
     display:block;
     clear:both;
     content:"";
   }
   .listBox div{
     float:left;
     width:100px;
     margin-right:10px;
     padding-bottom:3000px;
     margin-bottom:-3000px;
   }
   

2. 第二种方式利用flex布局特有属性，其中设置align-items:stretch;可以在侧轴方向拉伸以填充包含区块，也可以设置-webkit-box-align:stretch;,只不过这个不兼容，需要添加浏览器的前缀，并且这两个属性同时使用，第一种方式会覆盖掉第二种方式，所以建议使用第一个

   .listBox{
     overflow:hidden;
     display:flex;
     /* -webkit-box-align:stretch; */
     align-items:stretch;
   }
   .listBox div{
     width:100px;
     margin-right:10px;
   }
   .div1{
     background:red;
   }
   .div2{
     background:blue;
   }
   

   html还是用上面的，效果和第一种一样，如图所示：

   
   
   flex等高布局