![](_script:Site.hoverQrCode("//28118246.s21i.faiusr.com/2/ABUIABACGAAg6ujAlQYo_NfwIzCUATiTAQ.jpg",this,{"tips":"請使用微信掃一掃"});)
企業網站制作中如何實現圖文瀑布流的展現樣式發表時間：2023-01-11 09:06 什么是網頁瀑布流布局？在企業網站制作時，瀑布流簡單來說就是網頁列表數據會根據列表內容高度自動從左到右，從上而下進行內容排列，同時瀑布流的另一個優勢就是會根據屏幕寬度自動適應寬度變化。由于傳統的浮動布局或者行內元素布局塊元素單獨成行，會導致元素上下之間出現大量留白。而且如果用純css來實現瀑布流布局不需要大量的代碼，使用css僅僅幾行的樣式就可以實現網頁的瀑布流布局。 以下html代碼就是網站制作中實現css瀑布流的文檔，大家可以直接進行模仿。 <!DOCTYPE html> <head> <title>CSS3瀑布流</title> <style> /*大層瀑布流大盒子*/ .container{width:50%;margin: 30px auto;} /*瀑布流布局樣式*/ .waterfall{ column-count:2; } /*每一個列表的內容樣式*/ .item{ padding: 1em; margin:1em; break-inside: avoid; border: 2px solid #000; } .item img{ width: 100%; } </style> </head> <body> 掌握點： 1、column-count 該css屬性把大盒子內的列表共分為兩列 2、break-inside: avoid; 避免元素內部斷行并產生新列 <div class="container"> <ul class="waterfall"> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621441196155.jpg"> <p>我是網站制作中瀑布流布局內容，在這里使用css樣式來實現而不需要復雜的js代碼，這種瀑布流在網站制作中可是使用的很普遍</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621264885111.jpg"> <p>我是網站制作中瀑布流布局內容，僅僅使用css樣式來實現的呦</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621441196155.jpg"> <p>我是網站制作中瀑布流布局內容</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621264885111.jpg"> <p> 我是網站制作中瀑布流布局內容，這里面的內容是用來填充的里面高度的</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621441196155.jpg"> <p>我是網站制作中瀑布流布局內容，為了更直觀的顯示，大家可以直接復制上面的這些html+css代碼，放在空白文檔中進行測試，這里的文字只是為了撐起內容的高度。</p> </li> </ul> </div> </body> </html> 做公司網站時，常用的網頁瀑布流展示方式就是這樣通過簡單的css樣式來進行實現的。
文章分類：
優化知識
|