如何使两个section区块占用等量空间（无需使用<br>标签或不可见元素）

嘿，不用再靠<br>这种hack来撑高度啦！现代CSS布局有更优雅的解决办法，我给你推荐两种最常用的方案，优先用Flexbox，兼容性好还简单。

方案一：Flexbox布局（推荐） #

Flexbox是专门解决这类“等高容器”问题的，只需要给两个区块的父容器加上display: flex，就能让子元素自动保持高度一致。

修改步骤： #

1. 先在HTML里把.left和.right包裹到一个新的容器里（比如叫.content-row），方便单独控制这两个区块的布局：

<!-- 在原来的.table-block之后，添加这个容器 -->
<div class="content-row">
  <section class="left">
    <!-- 原有内容保持不变 -->
  </section>
  <section class="right">
    <!-- 原有内容保持不变 -->
  </section>
</div>

2. 然后修改CSS，给新容器添加Flex属性，同时去掉.left和.right的float（Flexbox不需要浮动）：

/* 添加新容器的样式 */
.content-row {
  display: flex;
  gap: 2%; /* 两个区块间的间距，刚好凑满100%宽度 */
  height: 55%; /* 保留你原本想要的高度占比 */
  margin-top: 1%;
}

/* 修改.left和.right的样式 */
.left, .right{
  background-color: #CBDDE7;
  width: 48%; /* 保留原本的宽度占比 */
  text-align: left;
  color: white;
  border: solid 2px #818181;
  border-radius: 15px;
  /* 移除float: left/right，以及原有的margin-top（移到.content-row上统一控制） */
}

.right{
  line-height: 1.8em; /* 这里注意你原来写的是1,8em，要改成英文的点哦 */
}

修改后不管哪个区块内容多，两个都会自动保持相同高度，完全不需要额外空元素。

方案二：Grid布局 #

如果你更喜欢Grid，这个方案代码更简洁：

.content-row {
  display: grid;
  grid-template-columns: 48% 48%;
  gap: 2%;
  height: 55%;
  margin-top: 1%;
}

/* 同样移除.left和.right的float属性 */
.left, .right{
  /* 其他样式不变，只去掉float */
}

为什么原来的float方案不行？ #

原来用float的话，元素会脱离文档流，高度完全由自身内容决定，所以内容少的区块自然更矮。而Flexbox和Grid是现代的布局系统，默认会让子元素在垂直方向上的高度保持一致，完美解决你的问题。

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