css实现两个div并排等高

方法一、表格布局Table-layout

IE兼容情况：不兼容IE7，兼容IE8及以上

<style>
.row {display: table;}
.col {display: table-cell;  width: 50%; padding: 10px; border: solid;}
</style>
<div class="row">
    <div class="col">我是第一个<br>我是第一个<br>我是第一个<br>我是第一个<br></div>
    <div class="col">我是第二个</div>
</div>

　　

方法二、内外补丁法

IE兼容情况：兼容IE7及IE7以上

<style>
#wrap {
    overflow:hidden;/*// (这行代码是重点，否则你会看到页面很长很长)*/
    padding:0;
    padding-left:180px;/*（内补丁）*/
}
#left,#right {
    height:auto;
    margin-bottom:-10000px;/*（外补丁）*/
    padding-bottom:10000px;/*（内补丁）*/
}
#left {
    display:inline;
    float:left;
    width:180px;
    margin-left:-180px;/*（外补丁）*/
    background: #0CF;
}
#right{
    float:right;
    width:100%;
    background: #FC6;
}
</style>
 
<div id="wrap">
    <div id="left">11111<br>111<br>11111<br>1111111<br><br>11111<br>111<br>11111<br></div>
    <div id="right">right</div>
</div>

　　

方法三、Flex弹性盒子

IE兼容情况：不兼容IE9及以下，最低兼容IE10

<style>
.row {display: flex;}
.col {flex: 1;}
</style>

<div class="row">
    <div class="col">我是第一个<br>我是第一个<br>我是第一个<br>我是第一个</div>
    <div class="col">我是第二个</div>
    <div class="col">...</div>
</div>

　　

方法四、CSS3盒模型display: -webkit-box【webkit内核】

IE兼容情况：不兼容(包括IE11，均不兼容)

<style>
.wrap1 {display: -webkit-box;}
.left1{width:30%; background:#0acfff;}
.right1{width:70%; background:#ff412b;}
</style>

<div class="wrap1">
    <div class="left1">left div<br/><br/><br/>rr</div>
    <div class="right1">right div</div>
</div>

　　当子元素个数不确定的情况下，想让子元素等分宽度，实现如下

<style>
.wrap1 {display: -webkit-box;}
.left1{width:0%; background:#0acfff;-webkit-box-flex:1;}
.right1{width:0%; background:#ff412b;-webkit-box-flex:1; overflow:hidden;}
</style>

<div class="wrap1">
    <div class="left1">left div<br/><br/><br/>rr</div>
    <div class="right1">sdgsdgdssssssssssssssssssssssssssssssssssssgsdgsdgsdgsdgsdgsdgsdgsdgsdg</div>
</div>

　　将子元素设置width:0%; -webkit-box-flex:1; 其中width设置为0%的原因不明。

方法五、CSS网格Grid

IE兼容情况：不兼容(包括IE11均不兼容)

<style>
.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.element {border: 1px solid #000;}
</style>
<div class="container">
  <div class="element">我是第一个<br>我是第一个<br>我是第一个<br>我是第一个</div>
  <div class="element">...</div>
  <div class="element">...</div>
</div>