如何用Flexbox使row容器内的section元素高度一致？

你的问题出在float属性破坏了flex布局的等高特性——虽然你给.row加了flex，但给#sectionL和#sectionR设置的float会让它们脱离flex的控制，导致等高失效。按下面的步骤修改CSS就能解决：

修改步骤 #

1. 移除section的float属性：删掉#sectionL里的float: left和#sectionR里的float: right
2. 利用flex实现等高+固定宽度：给两个section添加flex: 0 0 49.85%，这样既保留你想要的宽度，又能让flex容器自动把它们拉伸到相同高度
3. 可选优化：给.row添加gap: 0.3%来替代你用宽度差留出的间隙，布局更清晰

修改后的关键CSS代码 #

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  gap: 0.3%; /* 替代宽度差的间隙，可选 */
}

#sectionL {
  width: 49.85%;
  flex: 0 0 49.85%; /* 新增，固定宽度并启用flex拉伸 */
  margin: 0;
}

#sectionR {
  width: 49.85%;
  flex: 0 0 49.85%; /* 新增，固定宽度并启用flex拉伸 */
  margin: 0;
}

section {
  background-color: #3d1016;
  /* 删掉这里的float: left */
  width: 100%;
  margin: 0;
}

原理说明 #

flex容器的默认align-items: stretch属性会让所有子元素自动拉伸到容器内最高元素的高度，只要子元素没有设置固定高度、也没有被float等属性打断布局，就能实现完美等高。

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