column-count与column-width计算优先级示意实例页面

展示

.container-1

column-count与column-width都有可能有更高的优先级，要看具体场景。优先级计算诀窍就是统一转换column-count值，哪个值小就使用哪一个。

.container-2

column-count与column-width都有可能有更高的优先级，要看具体场景。优先级计算诀窍就是统一转换column-count值，哪个值小就使用哪一个。

代码

HTML：

<div class="container-1">...</div>
<div class="container-2">...</div>

CSS：

.container-1 {
    width: 360px;
    column-count: 2;
    column-width: 100px;
}
.container-2 {
    width: 360px;
    column-count: 4;
    column-width: 100px;
}