css3多列及瀑布流效果示例代码

来源：懂视网责编：小采时间：2020-11-27 18:52:42

css3多列及瀑布流效果示例代码

css3多列及瀑布流效果示例代码:这篇文章介绍css3多列及瀑布流效果示例代码css3内容分块，多列效果(类似报纸版块排版):.p02{ /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/ column-count:4; column-gap:30px; column-rule:5px outset #

推荐度：

点击下载本文 文档为doc格式

导读css3多列及瀑布流效果示例代码:这篇文章介绍css3多列及瀑布流效果示例代码css3内容分块，多列效果(类似报纸版块排版):.p02{ /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/ column-count:4; column-gap:30px; column-rule:5px outset #

这篇文章介绍css3多列及瀑布流效果示例代码

css3内容分块，多列效果(类似报纸版块排版):

.p02{ /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/
 column-count:4;
 column-gap:30px;
 column-rule:5px outset #ff0000;
 -webkit-column-count: 4;
 -webkit-column-gap: 30px;
 -webkit-column-rule: 5px outset #ff0000;
}

css3实现图片瀑布流排版:

.container {
 column-width: 350px;
 -webkit-column-width: 350px;
 column-gap: 5px;
 -webkit-column-gap: 5px;
}img {
 width: 400px;
}.container p {
 width: 350px;
 margin: 5px;
}p {
 text-align: center;
}

瀑布流效果html代码如下:

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="pubuliu.css" />
 </head>
 <body>
 <p class="container">
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/2.jpg" /><p>文字描述</p></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/2.jpg" /></p>
 <p><img src="../../image/5.jpg" /><p>文字描述</p></p>
 <p><img src="../../image/3.jpg" /></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/3.jpg" /></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/5.jpg" /><p>文字描述</p></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/5.jpg" /><p>文字描述</p></p>
 <p><img src="../../image/5.jpg" /></p>
 <p><img src="../../image/5.jpg" /></p>
 </p>
 </body></html>

css3多列及瀑布流效果示例代码

推荐度：

点击下载本文 文档为doc格式

标签：代码效果实例

热门焦点

css3多列及瀑布流效果示例代码

css3多列及瀑布流效果示例代码

css3多列及瀑布流效果示例代码

最新推荐

猜你喜欢

热门推荐