[分享]css两个并排div一样高

CSS 中实现两个并排的 div 元素等高，是一个非常常见的需求。众所周知，HTML 中默认的元素是根据内容自适应高度的，所以如果两个并排的 div 高度不同，就会出现很多问题，如布局错乱、间距不均等...

CSS 中实现两个并排的 div 元素等高，是一个非常常见的需求。众所周知，HTML 中默认的元素是根据内容自适应高度的，所以如果两个并排的 div 高度不同，就会出现很多问题，如布局错乱、间距不均等。

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

.wrapper {
  display: flex;
}

.left, .right {
  flex: 1;
} 

其中，'wrapper' 是一个容器，使用 flexbox 实现两个并排的 div 等高。'left' 和 'right' 分别表示左侧和右侧的 div 元素，都设置了 flex 属性，表示每个 div 元素的宽度都是相同的，这样就能实现同高了。

注意，在实现这个需求时，只需要设置外层容器的属性即可，无需设置内部 div 的高度，这样就不用考虑内部子元素的高度影响布局等问题，减少了代码的复杂度，提高了开发效率，同时也能让布局更加优雅，代码更加简洁。