CSS3 column-count 属性

column-count 属性用于指定一个元素应该被分割成的列数。这个属性通常用于实现多列布局。

语法

selector {
    column-count: value;
}

值

• value: 一个正整数，表示元素应该被分割成的列数。

初始值

auto

应用规则

• 该属性仅适用于块级元素。
• 元素的内容将被自动分割成指定列数的列。
• 当元素的宽度不足以容纳指定的列数时，列数可能会减少以适应元素的宽度。

示例

.columned-element {
    column-count: 3;
}

<div class="columned-element">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac velit eu risus viverra scelerisque.</p>
    <p>Phasellus sit amet nisl vel nulla fermentum eleifend. Nullam in nisi aliquet, luctus orci sit amet, fermentum sapien.</p>
    <p>Quisque cursus felis ac porta sagittis. Fusce nec leo eget augue egestas tincidunt.</p>
</div>

注意事项

• 当使用 column-count 属性时，通常需要搭配 column-width 属性来指定列的宽度，以确保列的宽度符合设计要求。
• 不同浏览器对多列布局的支持程度有所不同，需要进行兼容性测试。