纯CSS3怎么创建瀑布流布局？columns方法浅析

在之前的文章《效果如下图所示：

ok，瀑布流布局实现了！那么下面分析一下上述代码，给大家介绍几个关键的css属性：

• @media 查询：可以针对不同的屏幕尺寸设置不同的样式

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

• column-count属性：指定某个元素应分为的列数。

• column-gap 属性：指定列间距。

column-gap: length|normal;
length    一个指定的长度，将设置列之间的差距    
normal    指定一个列之间的普通差距。 W3C建议1EM值

• break-inside属性：描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。

  上例中：

.item { break-inside: avoid; box-sizing: border-box; padding: 10px; }

break-inside:avoid为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。

• counter-increment属性：递增一个或多个计数器值，通常用于counter-reset属性和content属性。例如上例中：

.item {
counter-increment: item-counter;
}

.item__content:before {
content: counter(item-counter);
}

PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！

以上就是纯CSS3怎么创建瀑布流布局？columns方法浅析的详细内容，更多请关注亿码酷站其它相关文章！

纯CSS3怎么创建瀑布流布局？columns方法浅析
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

27410288普通用户

收藏 海报 链接