CSS3-Methode zur Implementierung des Wasserfall-Flow-Layouts-CSS-Tutorial-php.cn

CSS3-Methode zur Implementierung des Wasserfall-Flow-Layouts

php中世界最好的语言

Freigeben： 2018-03-21 10:01:57

Original

2918 Leute haben es durchsucht

Dieses Mal werde ich Ihnen zeigen, wie man das Wasserfall-Flusslayout mit CSS3 implementiert und welche Vorsichtsmaßnahmen für die Implementierung des Wasserfall-Flusslayouts mit CSS3 gelten. Hier ist ein praktischer Fall Schauen Sie mal rein.

Früher musste man js verwenden, um den Wasserfallfluss zu nutzen. Jetzt kann man ihn mit CSS3 einfach implementieren.

Meisterpunkte:

1. Column-Count teilt den Text in p in mehrere Spalten.

2. Column-Width gibt die Spaltenbreite an 🎜>

3. Spaltenlücke gibt Spaltenlücke an

4. Zeilenumbrüche innerhalb von Elementen vermeiden und neue Spalten generieren

Hinweis: Internet Explorer 9 und frühere IE Versionsbrowser unterstützen das Column-Count-Attribut nicht. Das

column-count-Attribut gibt die Anzahl der Spalten an, durch die Elemente getrennt werden sollen:

column-gap-Attribut gibt die Lücke zwischen Spalten an:

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

Nach dem Login kopieren

Spalte – Das Regelattribut legt die Breiten-, Stil- und Farbregeln zwischen Spalten fest:

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

Nach dem Login kopieren

Beispiel:

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Artikel. Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!

<!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;
    }
    /*一个内容层*/
    .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>
    <p class="container">
        <p class="waterfall">
            <p class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg">
                <p>1 convallis timestamp</p>
           </p>
            <p class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg">
                <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
           </p>
            <p class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.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>
           </p>
            <p class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg">
                <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </p>
  <p class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg">
                <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           </p>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

Empfohlene Lektüre:

CSS3-gestreifter Hintergrund

CSS3-Textverlaufsanimation

Dynamischer CSS3-Eingabeaufforderungseffekt, wenn sich die Maus in das Bild bewegt

Das obige ist der detaillierte Inhalt vonCSS3-Methode zur Implementierung des Wasserfall-Flow-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!