CSS—瀑布流效果
阿新 • • 發佈：2019-02-15
HTML程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="stylesheet" type="text/css" href="waterFallflow.css"> </head> <body> <div class="container "> <div><img src="其他小可愛/5.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/1.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/7.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="其他小可愛/9.jpg"> <p>其他小可愛</p></div> <div><img src="爐石傳說小可愛/2.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="其他小可愛/2.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/3.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/8.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/4.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/6.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/5.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/4.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/6.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/5.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/7.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/3.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/8.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/7.jpg"> <p>萌萌噠德魯伊</p></div> <div><img src="爐石傳說小可愛/9.jpg"> <p>其他小可愛</p></div> <div><img src="其他小可愛/4.jpg"> <p>萌萌噠德魯伊</p></div> </div> </body> </html>
CSS程式碼
.container{
column-width: 450px;
column-gap:25px;
}
/*這個控制的是每個分組的寬度，和兩組之間的間距*/
.container div{
width: 450px;
margin-top: 15px;
}
/*這個控制圖片的寬度，和距離豎行的間距*/
p{
text-align: center;
color: deepskyblue;
}
/*標籤的文字位置居中和文字顏色*//效果：
