css布局column |img css 缩放

.container {
column-count: 3;
column-gap: 20px;
width: 800px;
}
.item {
background-color: #ddd;
margin-bottom: 20px;
padding: 10px;
}

在上面的代码中，大家定义了一个class为.container的元素作为容器来放置大家要分栏的内容。设置了column-count为3，表示这个容器拥有3列；设置了column-gap为20px, 表示每一列之间的间距为20px。大家还设置了容器的宽度为800px。

接下来定义了一个class为.item的元素，这个元素是大家要在分栏中显示的内容项。设置了它的背景颜色为#ddd, 间距为20px，并添加了10px的内边距。在实际应用中，大家可以通过JavaScript等方式来动态添加这个元素。

使用column布局的这个例子，可以自动将内容平均分配到3列中，并且自动处理缩放等问题。可以让大家更容易地实现分栏页，并且代码量也大大减少了。