文本框中实现分栏效果的方法与步骤详解

<div class="column">
这是第一栏的内容。
</div>
<div class="column">
这是第二栏的内容。
</div>

.column {
float: left; /* 使用传统流体布局 */
width: calc(50% - 10px); /* 分为两栏各占一半宽度，减去适当间距 */

/* 或者使用 Flexbox 实现：*/

display: flex;
justify-content: space-between;
}

/* 注意清理浮动的影响以免影响其他元素布局 */
.clearfix::after {
content: "";
clear:both;
display:block;
}
<!-- 然后给包含分栏的父级盒子添加 clearfix 类 -->
<div class="clearfix"> <!-- 包含上述 div 的外层容器 -->

...

</div>

/* 若想尝试 Grid 布局，则如下配置：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); // 自适应网格大小，最小300像素宽
} */

<style>
.text-container{
column-count: 2; /* 设置分成几栏，默认等分布局 */
column-gap: 4em; /* 设定每栏之间的间隔距离 */
}
</style>

<div class="text-container">
<p>这是第一栏的文字。</p>
<p>这里是另一段落，自动分配至下一栏。</p>
...
</div>