CSS文本多列布局无法生效问题求助（附完整代码）

核心问题分析 #

你的三列布局不生效主要有3个原因：

• .block 中 columns: 4 150px 是column-count和column-width的简写属性，会直接覆盖之前定义的column-count: 3，导致列数变成4而非预期的3。
• p标签设置了固定width: 400px和相对定位偏移，每个段落都占满400px宽度，多列布局无法将它们拆分到不同列中。
• .block内重复定义了column-rule，前一条规则被后一条覆盖（不影响布局，但属于冗余代码）。

修改后的代码 #

CSS 部分 #

/* 移除p标签的固定宽度和定位偏移，让内容自适应多列容器 */
p {
    color: white;
    text-align: center;
    margin: 0; /* 可选：移除默认边距避免间距混乱 */
}

/* 多列布局设置 */
.block {
    margin: 20px auto; /* 让容器居中 */
    width: 90%; /* 设置合适宽度，避免过宽 */
    column-count: 3; /* 明确设置3列 */
    column-gap: 40px;
    column-rule: 2px solid #00f;
}

HTML 核心结构 #

<div class="container">
    <div class="block">
        <p>第一列文本内容第一列文本内容第一列文本内容第一列文本内容第一列文本内容</p>
        <p>第二列文本内容第二列文本内容第二列文本内容第二列文本内容第二列文本内容</p>
        <p>第三列文本内容第三列文本内容第三列文本内容第三列文本内容第三列文本内容</p>
    </div>
</div>

替代方案（精确控制每列） #

如果需要让每一段文本单独占一列，更适合用Grid布局替代CSS Columns：

.block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 20px auto;
    width: 90%;
}

.block p {
    color: white;
    text-align: center;
    border-right: 2px solid #00f; /* 替代column-rule效果 */
}

.block p:last-child {
    border-right: none; /* 移除最后一列的右侧边框 */
}

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