CSS中display:table-cell设置50%宽度并换行的问题求助

嘿，我来帮你搞定这个需求！你想要的是移动端每行显示两个占50%宽度的div，还得保证同一行的div高度一致，而且不用JavaScript对吧？咱们一步步来分析和解决：

为什么你的两种初始方案有问题？ #

• 浮动布局：确实能实现每行两个div，但浮动元素的高度是由各自内容决定的，没法自动让同一行的元素等高，这就是你遇到的第一个问题。
• 表格布局：你用display:table-row的话，所有子元素（table-cell）都会挤在同一行里，因为table-row本身就是用来定义表格的一行，自然不会换行，所以50%宽度的设置也没法生效，这就是第二个问题的原因。

推荐两种完美实现的CSS方案 #

方案1：Flexbox（兼容性好，推荐移动端使用） #

Flexbox是现代CSS布局的利器，能轻松实现自动换行+等高+固定宽度的需求，代码非常简洁：

<div class="box-container">
  <div class="box">内容1<br>多行内容测试</div>
  <div class="box">内容2</div>
  <div class="box">内容3<br>更多<br>测试内容</div>
  <div class="box">内容4</div>
</div>

.box-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* 一行放不下时自动换行 */
  box-sizing: border-box; /* 可选，避免padding/border导致宽度溢出 */
}

.box {
  flex: 0 0 50%; /* 不放大、不缩小，基础宽度占50% */
  box-sizing: border-box; /* 配合父元素，确保内边距不影响宽度计算 */
  /* 可以加一些样式让效果更明显 */
  border: 1px solid #ccc;
  padding: 10px;
}

Flexbox默认会让同一flex行内的所有元素高度相等，完美解决你要的等高需求，而且flex-wrap:wrap会自动在一行放不下时换行，正好满足每行两个的效果。

方案2：Grid布局（更简洁的现代方案） #

如果你不需要兼容特别老的移动端浏览器（比如iOS 10以下），Grid布局会更直观：

.box-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 定义两列，每列平分可用宽度 */
  gap: 0; /* 可选，设置列之间的间距 */
  box-sizing: border-box;
}

.box {
  /* 不需要额外设置宽度，Grid会自动分配 */
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 10px;
}

Grid布局同样默认让同一行的元素高度相等，grid-template-columns: repeat(2,1fr)直接定义了两列，每列宽度均等，超出后自动换行，代码比Flexbox更简洁。

额外提示 #

如果你的div需要设置内边距或者边框，一定要加上box-sizing: border-box，这样元素的宽度计算会包含内边距和边框，避免50%宽度加上padding后超出父容器，导致布局错乱。

内容的提问来源于stack exchange，提问作者Erica Stockwell-Alpert