如何无需额外div与脚本，实现CMS文本自动分双列展示？

完全不需要依赖JavaScript，CSS的**多列布局（CSS Columns）**正好匹配你描述的场景——让用户在单个可编辑div中输入内容，内容会自动在300px宽、100px高的区域内排列，填满后自动流转到右侧剩余空间，全程无需用户手动创建多个容器。

实现方案代码 #

首先是HTML结构，只需要一个带contenteditable="true"的div，让它变成可输入区域：

<div class="content-flow" contenteditable="true">
  在这里输入任意文本，内容会自动按规则流转哦！试试输入足够多的内容，看看它怎么自动跳到右侧~
</div>

然后是核心CSS样式：

.content-flow {
  /* 容器占满父元素宽度，让右侧剩余空间可以利用 */
  width: 100%;
  /* 固定高度，确保内容填满这个高度后才会流转到下一列 */
  height: 100px;
  /* 指定每一列的最小宽度为300px，符合你要求的左侧区域宽度 */
  column-width: 300px;
  /* 可选：列之间的间距，根据需求调整或移除 */
  column-gap: 15px;
  /* 基础样式，让输入区域更友好 */
  padding: 10px;
  border: 1px solid #ddd;
  /* 防止内容过多时溢出容器，若需要滚动条可改为overflow: auto */
  overflow: hidden;
}

关键属性解释 #

• contenteditable="true"：把普通div转换成可编辑区域，完美适配CMS场景下用户自由输入的需求。
• height: 100px：固定容器高度，确保内容必须填满这个垂直空间后，才会自动流向右侧的新列。
• column-width: 300px：定义每一列的最小宽度为300px，浏览器会自动根据容器总宽度计算能容纳的列数——当第一列（300px宽、100px高）放不下内容时，就会自动在右侧生成新列，利用剩余空间继续排列内容。
• column-gap：控制列与列之间的间距，让排版更美观，可按需调整或直接移除。

额外小提示 #

如果需要强制限制最多两列（不管容器总宽度多少，只分左右两列），可以把column-width: 300px替换为column-count: 2，再搭配width: fit-content让容器自适应列宽，不过默认的column-width方案已经能很好地适配“利用右侧剩余空间”的需求了。

总之，这个纯CSS方案完全符合你的要求：无需脚本、用户只需在单个div输入、内容自动按指定区域流转。

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