如何实现不同高度评论文本框的流式垂直排列？

你需要的是瀑布流式布局，让每个评论框高度随内容自适应，同时自动填充行内空隙，以下是两种可靠的实现方案：

方案一：CSS Grid 布局（推荐） #

Grid 是最直观的实现方式，能精准控制列数和间距，且盒子高度完全由内容决定：

修改 CSS 代码如下：

.container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 固定4列，每列宽度均等 */
  gap: 1%; /* 控制列与列、行与行之间的间距 */
}

.box {
  background-color: black;
  color: white;
  padding: 1rem; /* 可选：添加内边距优化内容显示 */
}

说明： #

• grid-template-columns: repeat(4, 1fr) 直接创建4等宽列，替代你原来的width:24%，配合gap避免手动计算间距
• Grid 会自动处理盒子排列，每个盒子高度完全由内部内容撑开，不会强制拉伸至同行最高高度

方案二：CSS 多列布局 #

适合需要流式排列的场景，同样能实现自适应高度的错落效果：

修改 CSS 代码如下：

.container {
  width: 100%;
  column-count: 4; /* 设置4列 */
  column-gap: 1%; /* 列间距 */
}

.box {
  break-inside: avoid; /* 核心：防止单个评论框被拆分到两列 */
  background-color: black;
  color: white;
  padding: 1rem;
  margin-bottom: 1%; /* 列内评论框之间的垂直间距 */
}

注意事项： #

• 修正你代码中的类名不一致问题：CSS 里的.container-reviews要和 HTML 中的.container统一，否则样式不会生效
• 两种方案都无需使用float，现代浏览器对 Grid 和多列布局支持度很高

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