CSS怎么实现内容不相同的左右两个div等高？

Posted 2021-04-09 web前端开发

问题

现在有两个div左右排列，但是两个div的内容不相同，如何设置两个div的css做到在两个div等高排列呢？下面是3种实现方法，觉得很有代表性，所以索性收藏起来。

方法一

通过父元素设置 overflow:hidden, div自己设置padding-bottom 和 margin-bottom来实现。

  
    
    
  

   
     
     
   <div id="#warp">
   
     
     
    <div>
   
     
     
    <br>
   
     
     
    <br>
   
     
     
    <br>
   
     
     
    left
   
     
     
    </div>
   
     
     
    <div>right</div>
   
     
     
   </div>
  
    
    
  

  
    
    
  

   
     
     
   #wrap {
   
     
     
    overflow: hidden;
   
     
     
    width: 1000px;
   
     
     
    margin: 0 auto;
   
     
     
   }
   
     
     
   #left,
   
     
     
   #center {
   
     
     
    margin-bottom: -10000px;
   
     
     
    padding-bottom: 10000px;
   
     
     
   }
   
     
     
   #left {
   
     
     
    float: left;
   
     
     
    width: 250px;
   
     
     
    background: #00ffff;
   
     
     
   }
   
     
     
   #center {
   
     
     
    float: left;
   
     
     
    width: 500px;
   
     
     
    background: #ff0000;
   
     
     
   }
  
    
    
  

方法二

使用 table-cell

  
    
    
  

   
     
     
   .left,
   
     
     
   .right {
   
     
     
    padding: 10px;
   
     
     
    display: table-cell;
   
     
     
    border: 1px solid #f40;
   
     
     
   }
  
    
    
  

 
   
   
 

  
    
    
  方法三
 
   
   
 

父元素使用 display: box;

  
    
    
  

   
     
     
   .wrap {
   
     
     
    display: -webkit-box;
   
     
     
   }
   
     
     
   .left,
   
     
     
   .right {
   
     
     
    padding: 10px;
   
     
     
    border: 1px solid #f40;
   
     
     
   }
  
    
    
  

效果如下图：