[分享]css两个div等高

在网页设计中，经常遇到需要让两个或多个div等高的情况。这就需要运用CSS技巧来实现。

  .container{
      display: flex;
    }
    .left,
    .right{
      flex: 1;
    } 

上述代码使用了CSS的flex布局。通过给容器设置flex属性，让两个div有相同的宽度。

同时，给子元素的flex属性设置为1，让它们平均分配可用空间，从而保证它们的高度相等。

  .container{
      display: table;
      table-layout: fixed;
      width: 100%;
    }
    .left,
    .right{
      display: table-cell;
      vertical-align: top;
      padding: 10px;
    } 

另一种实现方法是使用CSS的table布局，它与HTML表格一样将元素分为行和列。

通过设置容器的display属性为table，左右两个div的display属性为table-cell，再添加垂直对齐属性，就可以实现两个等高的div。

以上是两种常用的方法，当然还有其他方式，但无论哪种方法，实现等高div的关键在于掌握CSS的布局属性，结合需求灵活应用。