div两边等高

心已赠人 2022-11-19 12:45 201阅读 0赞

现有两个横向排列的div，

<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>

![20210113140900327.png][]

希望两个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;
      }
    }

![20210113141657527.png][]

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

![20210113144223596.png][]

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

三、说明：

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

（1）el-row和el-col：

<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>

![20210113144459424.png][]

解决方法：

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

<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>

![20210113145251806.png][]

[20210113140900327.png]: /images/20221119/649fe0a659e4492da0707e8360ee05e4.png
[20210113141657527.png]: /images/20221119/3ea6bbd7441a49719477c0ab159f62bf.png
[20210113144223596.png]: /images/20221119/a513736da55f45f18b62c8ad32e674d0.png
[20210113144459424.png]: https://img-blog.csdnimg.cn/20210113144459424.png
[20210113145251806.png]: https://img-blog.csdnimg.cn/20210113145251806.png