使用CSS3怎么实现一个瀑布流布局

tangjin

作者

使用CSS3怎么实现一个瀑布流布局？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

掌握点：

使用CSS3怎么实现一个瀑布流布局

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

column-count 属性规定元素应该被分隔的列数：

div
{
-moz-column-count:3;/*Firefox*/
-webkit-column-count:3;/*Safari和Chrome*/
column-count:3;
}

column-gap 属性规定列之间的间隔：

div
{
-moz-column-gap:40px;/*Firefox*/
-webkit-column-gap:40px;/*Safari和Chrome*/
column-gap:40px;
}

column-rule 属性设置列之间的宽度、样式和颜色规则：

div
{
-moz-column-rule:3pxoutset#ff0000;/*Firefox*/
-webkit-column-rule:3pxoutset#ff0000;/*SafariandChrome*/
column-rule:3pxoutset#ff0000;
}

实例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS3瀑布流</title>
<style>
/*大层*/
.container{width:80%;margin:0auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:4;/*Firefox*/
-webkit-column-count:4;/*Safari和Chrome*/
column-count:4;
-moz-column-gap:1em;
-webkit-column-gap:1em;
column-gap:1em;
}
/*一个内容层*/
.item{
padding:1em;
margin:001em0;
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
border:1pxsolid#000;
}
.itemimg{
width:100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<divclass="container">
<divclass="waterfall">
<divclass="item">
<imgsrc="https://cache.yisu.com/upload/information/20210311/295/7890.png">
<p>1convallistimestamp</p>
</div>



<divclass="item">
<imgsrc="https://cache.yisu.com/upload/information/20210311/295/7891.png">
<p>2convallistimestamp2Donecafermentumnisi.</p>
</div>




<divclass="item">
<imgsrc="https://cache.yisu.com/upload/information/20210311/295/7892.jpg">
<p>3Nullamegetlectusaugue.Doneceusemsitametligula
faucibussuscipit.Suspendisserutrumturpisquisnunc
convallisquisaliquammaurissuscipit.</p>
</div>



<divclass="item">
<imgsrc="https://cache.yisu.com/upload/information/20210311/295/7893.jpg">
<p>4Donecafermentumnisi.Integerdolorest,commodout
sagittisvitae,egestasataugue.</p>
</div>

<divclass="item">
<imgsrc="https://cache.yisu.com/upload/information/20210311/295/7894.jpg">
<p>5Donecafermentumnisi.Integerdolorest,commodoutsagittisvitae,egestasataugue.</p>
</div>
</div>
</div>
</body>
</html>

看完上述内容，你们掌握使用CSS3怎么实现一个瀑布流布局的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！

阅读全文

发布于 2021-04-15 01:55:19

css3