使用CSS3怎么實(shí)現(xiàn)一個(gè)瀑布流布局

使用CSS3怎么實(shí)現(xiàn)一個(gè)瀑布流布局？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)專業(yè)提供成都移動(dòng)機(jī)房托管服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買成都移動(dòng)機(jī)房托管服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。

掌握點(diǎn)：

1、column-count 把div中的文本分為多少列

2、column-width 規(guī)定列寬

3、column-gap 規(guī)定列間隙

4、break-inside: avoid; 避免元素內(nèi)部斷行并產(chǎn)生新列

注意: Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。

column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù)：

div
{
-moz-column-count:3;  /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

column-gap 屬性規(guī)定列之間的間隔：

div
{
-moz-column-gap:40px;  /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則：

div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3瀑布流</title>
    <style>
    /*大層*/
    .container{width:80%;margin: 0 auto;}
    /*瀑布流層*/
    .waterfall{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }
    /*一個(gè)內(nèi)容層*/
    .item{
      padding: 1em;
      margin: 0 0 1em 0;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
     border: 1px solid #000;
    }
    .item img{
        width: 100%;
        margin-bottom:10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="waterfall">
            <div class="item">
                <img src="/upload/otherpic65/7890.png">
                <p>1 convallis timestamp</p>
           </div>



            <div class="item">
                <img src="/upload/otherpic65/7891.png">
                <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
           </div>




            <div class="item">
                <img src="/upload/otherpic65/7892.jpg">
                <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
        faucibus suscipit. Suspendisse rutrum turpis quis nunc 
        convallis quis aliquam mauris suscipit.</p>
           </div>



            <div class="item">
                <img src="/upload/otherpic65/7893.jpg">
                <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </div>

  <div class="item">
                <img src="/upload/otherpic65/7894.jpg">
                <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           </div>
        </div>
    </div>
</body>
</html>

看完上述內(nèi)容，你們掌握使用CSS3怎么實(shí)現(xiàn)一個(gè)瀑布流布局的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：使用CSS3怎么實(shí)現(xiàn)一個(gè)瀑布流布局
轉(zhuǎn)載注明：http://aaarwkj.com/article16/jjgogg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、App開發(fā)、服務(wù)器托管、營銷型網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)頁設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

使用CSS3怎么實(shí)現(xiàn)一個(gè)瀑布流布局