Maison > Article > interface Web > Comment utiliser CSS3 pour implémenter la disposition du flux en cascade

Comment utiliser CSS3 pour implémenter la disposition du flux en cascade

不言original: 2018-06-20 16:40:112138parcourir

Cet article présente principalement l'exemple de code pour implémenter la disposition du flux en cascade à l'aide de CSS3. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Dans le passé, l'utilisation du flux en cascade nécessitait l'utilisation de js, mais maintenant avec css3, cela peut être facilement implémenté.

Points de maîtrise :

1. Le nombre de colonnes divise le texte de p en plusieurs colonnes

2. 🎜>

3. column-gap spécifie l'espacement des colonnes

4. break-inside : évitez les sauts de ligne à l'intérieur des éléments et générez de nouvelles colonnes

Remarque : Internet Explorer 9 et versions antérieures d'IE. Les navigateurs de versions ne prennent pas en charge l'attribut column-count.

l'attribut column-count spécifie le nombre de colonnes par lesquelles les éléments doivent être séparés :

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

l'attribut column-gap spécifie l'écart between columns :

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

l'attribut column-rule définit les règles de largeur, de style et de couleur entre les colonnes :

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

Exemple :

<!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>

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile pour tout le monde apprend, plus Veuillez prêter attention au site Web PHP chinois pour le contenu associé !

Recommandations associées :

À propos de la façon d'implémenter une mise en page multi-lignes et multi-colonnes avec CSS

Comment utiliser CSS pour implémenter le survol de la souris L'effet de la rotation de l'icône en mouvement

Utiliser CSS3 pour créer un code papillon battant des ailes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser CSS3 avec les filtres IE pour obtenir des effets de dégradé et d'ombre portéeArticle suivant：Comment utiliser CSS3 avec les filtres IE pour obtenir des effets de dégradé et d'ombre portée

Articles Liés

Voir plus