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

Méthode CSS3 pour implémenter la disposition du flux en cascade

php中世界最好的语言original: 2018-03-21 10:01:572926parcourir

Cette fois, je vais vous expliquer comment implémenter la disposition de flux en cascade avec CSS3, et quelles sont les précautions pour implémenter la disposition de flux en cascade avec CSS3. Voici un cas pratique, voyons. jetez un oeil.

Dans le passé, vous deviez utiliser js pour utiliser le flux en cascade. Désormais, avec CSS3, vous pouvez facilement l'implémenter.

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'espace entre les colonnes :

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

colonne- L'attribut règle 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>

Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce article. Veuillez prêter attention aux choses plus excitantes. D'autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Fond rayé CSS3

Animation dégradée de texte CSS3

Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image

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 efficacement les sélecteurs CSSArticle suivant：Comment utiliser efficacement les sélecteurs CSS

Articles Liés

Voir plus