能否通过CSS按类将子元素排序到容器3列中（从左到右排列）？

当然可以！纯CSS完全能搞定这个需求，CSS Grid是最适合的方案——不用动JS，也不需要修改HTML结构，就能让不同class的子元素自动归到对应列，同时保持从左到右的排序逻辑（比如你说的ervewrv会在afrvewrwerb左侧）。

实现思路 #

核心是利用Grid的grid-column属性，强制指定不同class的元素属于哪一列，配合Grid的自动流布局，同列的元素会按HTML顺序自动堆叠，不同列的元素则在同一行从左到右排列。

完整代码示例 #

HTML结构 #

假设你的HTML是这样的（子元素带对应列的class）：

<div class="column-container">
  <div class="col-1">ervewrv</div>
  <div class="col-2">afrvewrwerb</div>
  <div class="col-3">xcvxcv</div>
  <div class="col-1">qweqwe</div>
  <div class="col-2">asdasd</div>
  <div class="col-3">zxczxc</div>
  <div class="col-1">tyrtyr</div>
</div>

CSS代码 #

.column-container {
  display: grid;
  /* 定义3列，这里用1fr让列宽等分，也可以改成固定宽度比如200px */
  grid-template-columns: repeat(3, 1fr);
  /* 可选：设置列和行之间的间距，提升美观 */
  gap: 1.5rem;
  /* 可选：给容器加个内边距 */
  padding: 1rem;
}

/* 强制指定各class元素的列位置 */
.col-1 {
  grid-column: 1;
}

.col-2 {
  grid-column: 2;
}

.col-3 {
  grid-column: 3;
}

/* 可选：给子元素加样式，方便看效果 */
.column-container > div {
  padding: 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}

效果说明 #

最终呈现的布局是：

• 第一列（左）：ervewrv → qweqwe → tyrtyr
• 第二列（中）：afrvewrwerb → asdasd
• 第三列（右）：xcvxcv → zxczxc

完全符合你要的从左到右排序（同一行的元素按列1→列2→列3排列），而且所有元素按自身class自动归位，全程不需要JS介入。

扩展调整 #

• 如果不需要等宽列，把grid-template-columns改成具体值即可，比如250px 1fr 200px
• 若想调整行高，可以用grid-auto-rows属性指定默认行高，比如grid-auto-rows: 80px
• 间距gap可以分开设置列间距和行间距：column-gap: 1rem; row-gap: 0.5rem

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