在建企業(yè)網(wǎng)站的時(shí)候如何實(shí)現(xiàn)圖文瀑布流布局？
2023-11-15 22:58 作者:bili_47741569589 | 我要投稿
什么是網(wǎng)頁瀑布流布局？
在建企業(yè)網(wǎng)站時(shí)，瀑布流簡(jiǎn)單來說就是網(wǎng)頁列表數(shù)據(jù)會(huì)根據(jù)列表內(nèi)容高度自動(dòng)從左到右，從上而下進(jìn)行內(nèi)容排列，同時(shí)瀑布流的另一個(gè)優(yōu)勢(shì)就是會(huì)根據(jù)屏幕寬度自動(dòng)適應(yīng)寬度變化。由于傳統(tǒng)的浮動(dòng)布局或者行內(nèi)元素布局塊元素單獨(dú)成行，會(huì)導(dǎo)致元素上下之間出現(xiàn)大量留白。而且如果用純css來實(shí)現(xiàn)瀑布流布局不需要大量的代碼，使用css僅僅幾行的樣式就可以實(shí)現(xiàn)網(wǎng)頁的瀑布流布局。
<!DOCTYPE?html>
<head>
????<title>CSS3瀑布流</title>
????<style>
????/*大層瀑布流大盒子*/
????.container{width:50%;margin:?30px?auto;}
????/*瀑布流布局樣式*/
????.waterfall{?column-count:2;?}
????/*每一個(gè)列表的內(nèi)容樣式*/
????.item{??padding:?1em;??margin:1em;?break-inside:?avoid;??border:?2px?solid?#000;?}
????.item?img{?width:?100%;?}
????</style>
</head>
<body>
掌握點(diǎn)：
1、column-count?該css屬性把大盒子內(nèi)的列表共分為兩列
2、break-inside:?avoid;?避免元素內(nèi)部斷行并產(chǎn)生新列
<div?class="container">
?<ul?class="waterfall">
??<li?class="item">
???<img?src="/static/upload/image/20191206/1575621441196155.jpg">
???<p>我是網(wǎng)站制作中瀑布流布局內(nèi)容，在這里使用css樣式來實(shí)現(xiàn)而不需要復(fù)雜的js代碼，這種瀑布流在網(wǎng)站制作中可是使用的很普遍</p>
??</li>
??<li?class="item">
???<img?src="/static/upload/image/20191206/1575621264885111.jpg">
???<p>我是網(wǎng)站制作中瀑布流布局內(nèi)容，僅僅使用css樣式來實(shí)現(xiàn)的呦</p>
??</li>
??<li?class="item">
???<img?src="/static/upload/image/20191206/1575621441196155.jpg">
???<p>我是網(wǎng)站制作中瀑布流布局內(nèi)容</p>
??</li>
??<li?class="item">
???<img?src="/static/upload/image/20191206/1575621264885111.jpg">
???<p>?我是網(wǎng)站制作中瀑布流布局內(nèi)容，這里面的內(nèi)容是用來填充的里面高度的</p>
??</li>
??<li?class="item">
???<img?src="/static/upload/image/20191206/1575621441196155.jpg">
???<p>我是網(wǎng)站制作中瀑布流布局內(nèi)容，為了更直觀的顯示，大家可以直接復(fù)制上面的這些html+css代碼，放在空白文檔中進(jìn)行測(cè)試，這里的文字只是為了撐起內(nèi)容的高度。</p>
??</li>
?</ul>
</div>
</body>
</html>標(biāo)簽：
