div两边等高

现有两个横向排列的div，

<!-- @format -->

<template>
  <div class="body">
    <div class="left">左边</div>
    <div class="right">右边<br />换行</div>
  </div>
</template>
<style scoped lang="less">
.body {
  width: 50%;
  .left {
    float: left;
    width: 50%;
    border: 1px solid black;
  }
  .right {
    float: right;
    width: 50%;
    border: 1px solid black;
  }
}
</style>

希望两个div高度保持一致，有以下方法：

一、父级div设置为 display: -webkit-box；注意子div去掉左右浮动

.body {
  width: 50%;
  display: -webkit-box;
  .left {
    //float: left;
    width: 50%;
    border: 1px solid black;
  }
  .right {
    //float: right;
    width: 50%;
    border: 1px solid black;
  }
}

二、需要等高的两个div设置display: table-cell;父级div设置display: table;

<style scoped lang="less">
.body {
  width: 50%;
  display: table;
  .left {
    display: table-cell;
    width: 50%;
    border: 1px solid black;
  }
  .right {
    display: table-cell;
    width: 50%;
    border: 1px solid black;
  }
}
</style>

和上面一的区别：设置为table，如果左右两个div的宽度加起来为100%，中间再设置间距间距不体现，而一可以。

三、说明：

1、以下排列不能保证同行元素等高：

（1）el-row和el-col：

<!-- @format -->

<template>
  <div class="body">
    <el-row class="row">
      <el-col :span="12" class="left"><div>左边</div></el-col>
      <el-col :span="12" class="right"
        ><div>右边<br />换行</div></el-col
      >
    </el-row>
  </div>
</template>
<style scoped lang="less">
.row {
  width: 50%;
  .left {
    border: 1px solid black;
  }
  .right {
    border: 1px solid black;
  }
}
</style>

解决方法：

2、以下排列可以保证同行内元素等高：

<!-- @format -->

<template>
  <div class="body">
    <table>
      <tr>
        <td>左边</td>
        <td>右边<br />换行</td>
      </tr>
    </table>
  </div>
</template>
<style scoped lang="less">
table {
  width: 100%;
  td {
    width: 50%;
    border: 1px solid black;
  }
}
</style>

本文地址：https://blog.csdn.net/w_t_y_y/article/details/112561671