如何根据动态高度div的高度调整另一个div，实现两个并排div等高？

解决方案 #

你当前使用的浮动布局中，浮动元素会脱离正常文档流，无法自动和相邻的非浮动元素保持等高，可通过以下几种方案实现需求：

方案1：Flex布局（推荐，兼容所有现代浏览器） #

Flex布局默认会让所有子项自动拉伸到和最高子项相同的高度，仅需要修改外层容器样式即可：

1. 给外层div添加class属性，示例：<div class="container">
2. 替换原有CSS为以下内容：

.container {
  width: 100%;
  display: flex;
}
.first{
  width: 50%;
  background: yellow;
}
.second{
  width: 50%;
  background: grey;
}

方案2：Grid布局 #

Grid布局实现更简洁，直接声明两列等分即可自动实现等高：

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.first{
  background: yellow;
}
.second{
  background: grey;
}

方案3：表格布局（兼容IE8等旧版本浏览器） #

如果需要兼容老旧浏览器，可以用表格特性实现等高：

.container {
  width: 100%;
  display: table;
}
.first{
  width: 50%;
  display: table-cell;
  background: yellow;
}
.second{
  display: table-cell;
  background: grey;
}

内容的提问来源于stack exchange，提问作者Sreehari Avikkal