Rumah >hujung hadapan web >tutorial css >css3多列及瀑布流效果示例代码
css3多列及瀑布流效果示例代码
- 高洛峰asal
- 2017-03-09 18:37:511283semak imbas
这篇文章介绍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>
Atas ialah kandungan terperinci css3多列及瀑布流效果示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css3选择器的说明Artikel seterusnya：css3动画2D、3D转换的方法