CSS瀑布流是一種常見的網站布局方式,常用于圖片展示、商品展示等頁面效果。下面我們來看一個CSS瀑布流實例。
/* 瀑布流容器 */ .waterfall { column-count: 4; /* 劃分4列 */ column-gap: 20px; /* 列間距20像素 */ } /* 圖片容器 */ .waterfall .item { display: inline-block; /* 顯示為內聯塊元素 */ margin-bottom: 20px; /* 底邊距20像素 */ width: calc(25% - 20px); /* 寬度為25%減去一個列間距 */ } /* 圖片 */ .waterfall .item img { width: 100%; /* 圖片寬度100% */ }
以上代碼實現了一個四列瀑布流效果。我們在HTML中添加以下代碼:
<div class="waterfall"> <div class="item"><img src="1.jpg"></div> <div class="item"><img src="2.jpg"></div> <div class="item"><img src="3.jpg"></div> <div class="item"><img src="4.jpg"></div> <div class="item"><img src="5.jpg"></div> <div class="item"><img src="6.jpg"></div> <div class="item"><img src="7.jpg"></div> <div class="item"><img src="8.jpg"></div> <div class="item"><img src="9.jpg"></div> </div>
其中,img標簽中的src屬性可以改成實際項目中的圖片路徑。
這樣做就實現了一個簡單的CSS瀑布流布局。如果要實現更復雜的瀑布流效果,可以在HTML和CSS中添加一些其他樣式。
上一篇mysql 當前行數
下一篇mysql建表語句關鍵字