介绍 div
{
-moz-column-count: 3,,,/*, Firefox */-webkit-column-count: 3,,/*, Safari 和Chrome */column-count: 3;
} div
{
-moz-column-gap: 40 px;,,/*, Firefox */-webkit-column-gap: 40 px;,/*, Safari 和Chrome */纵队间隔:40像素;
} div
{
-moz-column-rule: 3 px outset # ff0000;,/*, Firefox */-webkit-column-rule: 3 px outset # ff0000;,/*, Safari 以及Chrome */column-rule: 3 px outset # ff0000;
} & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title> CSS3瀑布流& lt;/title>
,,,& lt; style>
,,,/*大层*/,,,.container{宽度:80%,利润率:0,汽车;}
,,,/*瀑布流层*/,,,.waterfall {
,,,,,,,-moz-column-count: 4,,/*, Firefox */,,,,,,,-webkit-column-count: 4,,/*, Safari 和Chrome */,,,,,,,column-count: 4;
,,,,,,,-moz-column-gap:, 1 em;
,,,,,-webkit-column-gap:, 1 em;
,,,,,纵队间隔:,1 em;
,,,}
,,,/*一个内容层*/,,,.item {
,,,,,填充:,1 em;
,,,,,保证金:,0,0,1 em 0;
,,,,,-moz-page-break-inside:,避免;
,,,,,-webkit-column-break-inside:,避免;
,,,,,break-inside:,避免;
,,,,边界:,1 px solid # 000;
,,,}
,,,.item img {
,,,,,,,宽度:,100%;
,,,,,,,margin-bottom: 10 px;
,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=癱ontainer"比;
,,,,,,,& lt; div 类=皐aterfall"比;
,,,,,,,,,,,& lt; div 类=癷tem"比;
,,,,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/img src=" https://cache.yisu.com/upload/information/20210311/295/7890.png ">
使用CSS3怎么实现一个瀑布流布局?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<>强劲掌握点:
1, column-count把div中的文本分为多少列
2,列宽规定列宽
3,纵队间隔规定列间隙
4, break-inside:避免;避免元素内部断行并产生新列
注意:Internet Explorer 9及更早即版本浏览器不支持column-count属性。
column-count属性规定元素应该被分隔的列数:
纵队间隔属性规定列之间的间隔:
column-rule属性设置列之间的宽度,样式和颜色规则:
实例:
1 convallis时间戳
2 convallis时间戳2 Donec酵母非绝对的。
3 Nullam eget lectus augue。Donec欧盟sem坐amet唇舌 faucibus suscipit。Suspendisse rutrum turpis, nunc convallis, aliquam毛里suscipit .
4 Donec酵母非绝对的。整数悲哀est, commodo ut 在augue sagittis血液、排泄物。
5 Donec酵母非绝对的。整数悲哀est, commodo ut sagittis血液、排泄物augue。