想要在css里实现多列,就需要定义:
- columns-count:n // 实现n列多列
- column-gap: n px // 实现多列间的间隙大小 (注意没有s)
- column-rule:n px(间隔线宽度) outset…(间隔线类型) color(各种颜色)
一、代码实现
(1)文字实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css.css" type="text/css"> </head> <body> <div class="div1"> so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! so be it ! i am god! </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 |
.div1{ /*列数*/ columns-count: 4; -webkit-column-count: 4; /*列间间隙*/ -webkit-column-gap: 30px; column-gap: 30px; /*间隔的形式(条纹)*/ column-rule: 5px outset #454545; -webkit-column-rule: 5px outset #454545; } |
实现效果:
(2)图片实现
下面实现照片墙的瀑布流效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" href="css.css" rel="stylesheet"> </head> <body> <div class="container"> <div><img src="1.jpg"></div> <div><img src="2.gif" width="300" height="500"></div> <div><img src="3.gif"></div> <div><img src="4.gif" width="300" height="500"></div> <div><img src="5.jpg"></div> <div><img src="6.gif"></div> <div><img src="7.jpg"width="300" height="500"></div> <div><img src="8.gif"></div> <div><img src="9.jpg"></div> <div><img src="1.jpg" width="300" height="500"></div> <div><img src="2.gif"></div> <div><img src="3.gif"></div> <div><img src="4.gif"></div> <div><img src="5.jpg" width="300" height="500"></div> <div><img src="6.gif"></div> <div><img src="7.jpg"></div> <div><img src="8.gif"></div> <div><img src="9.jpg"></div> <div><img src="1.jpg" width="300" height="500"></div> <div><img src="2.gif"></div> <div><img src="3.gif"></div> <div><img src="4.gif" width="300" height="500"></div> <div><img src="5.jpg"></div> <div><img src="6.gif"></div> <div><img src="7.jpg"></div> <div><img src="8.gif"></div> <div><img src="9.jpg"></div> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 |
.container{ column-width: 250px; -webkit-column-width: 250px; -webkit-column-gap: 5px; column-gap: 5px; } .container div{ width: 250px; margin: 5px 0; /*为什么我们不需要左右间距?因为通过多列间距gap我们已经实现了*/ } |
实现效果:
因为图片的规格相差比较多,所以瀑布流的实现效果不是很美观…
二、总结
实际应用的时候需要根据图片的规格设置比例,才会有比较好的效果。