column-count 接受一个整数值,表示元素应该被分割成的列数。例如:
.example {
column-count: 3; /* 将元素分割成三列 */
}
在这个例子中,.example 类的元素被设置为分割成三列。需要注意的是,浏览器会自动平均分配内容到每一列,因此内容会根据列数进行自动调整。
这个属性通常与 column-gap 和其他与多列布局相关的属性一起使用,以控制列与列之间的间隙、宽度等。
.example {
column-count: 3; /* 将元素分割成三列 */
column-gap: 20px; /* 列与列之间的间隙为 20px */
column-rule: 1px solid #ccc; /* 列与列之间的分隔线 */
}
请注意,column-count 不适用于块级元素,而是应用于使用 column-width 属性或自动计算的多列块。如果希望应用于块级元素,请考虑使用 Flexbox 或 Grid 布局。
转载请注明出处:http://www.zyzy.cn/article/detail/6047/CSS