Maison > Article > interface Web > Qu'est-ce qu'une colonne CSS et comment la remplir ?

Qu'est-ce qu'une colonne CSS et comment la remplir ?

PHPzavant: 2023-08-30 15:49:101368parcourir

什么是 CSS 列以及如何填充它？

Nous pouvons utiliser diverses propriétés CSS pour gérer les colonnes des pages Web, "column-fill" en fait partie. La propriété CSS column-fill est utilisée pour définir l'apparence du contenu dans plusieurs colonnes. Par exemple, il doit circuler ou s'équilibrer naturellement entre toutes les colonnes.

Parfois, nous devons définir le même contenu dans toutes les colonnes pour améliorer l'expérience utilisateur de l'application.

Grammaire

Les utilisateurs peuvent utiliser la propriété CSS column-fill selon la syntaxe suivante.

column-fill: auto | balance | initial | inherit;

Valeurs des propriétés CSS de remplissage de colonne

auto - Il définit le contenu dans le flux naturel. Par exemple, il remplit la première colonne et envoie uniquement le contenu à la deuxième colonne.
Balance - Utilisé pour définir le même contenu dans toutes les colonnes.
Initial - Définit la valeur par défaut, qui est "Balance".
Inherited - Il hérite de la valeur de la propriété de remplissage de colonne de l'élément parent.

Exemple 1

Dans l'exemple ci-dessous, nous avons défini deux éléments div et ajouté du contenu textuel. De plus, nous définissons des dimensions fixes pour les deux éléments div. Après cela, nous définissons le nombre de colonnes sur 2 et le remplissage des colonnes sur automatique.

Dans la sortie, nous pouvons observer qu'il remplit d'abord la première colonne puis seulement la deuxième colonne. Si la première colonne n'est pas entièrement remplie, le contenu reste dans la première colonne.

<html>
<head>
   <style>
      div {
         background-color: red;
         padding: 20px;
         font-size: 1.3rem;
         margin: 20px;
      }
      .javascript {
         column-count: 1;
         column-fill: auto;
         column-gap: 20px;
         column-rule: 1px solid #000;
      }
      .svelte {
         column-count: 2;
         column-fill: auto;
         column-gap: 20px;
         column-rule: 3px dotted blue;
      }
   </style>
</head>
<body>
   <h3> Using the <i> column-fill CSS property </i> to set the content in columns </h3>
   <div class = "javascript">
      JavaScript is a popular programming language used for both front-end and back-end development. It is known for its versatility, allowing developers to create dynamic and interactive websites and applications.
   </div>
   <div class = "svelte">
      Svelte is a web application framework that allows developers to build highly performant and reactive user interfaces. It is designed to optimize the code and minimize the amount of code sent to the browser, resulting in faster load times and better user experience.
      Svelte uses a reactive approach to building user interfaces, meaning that changes in data are automatically reflected in the user interface without needing to write additional code. This can significantly reduce development time and make the code easier to maintain.
   </div>
</body>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous avons défini deux éléments div comme le premier. Après cela, le nombre de colonnes du premier élément div est égal à 4 et le nombre de colonnes du deuxième élément div est égal à 3.

De plus, nous définissons également la valeur "balance" pour l'attribut "column-fill" des deux éléments div. Dans le résultat, nous pouvons voir comment le contenu est équilibré sur plusieurs colonnes, et même les colonnes qui ne sont pas pleines ont de l'espace en bas.

<html>
<head>
   <style>
      div {
         width: 600px;
         height: 200px;
         background-color: green;
         padding: 20px;
         font-size: 1.3rem;
         margin: 20px;
         color: white;
      }
      .python {
         column-count: 4;
         column-fill: balance;
         column-gap: 20px;
         column-rule: 1px solid red;
      }
      .react {
         column-count: 3;
         column-fill: balance;
         column-gap: 20px;
         column-rule: 3px dotted blue;
      }
   </style>
</head>
<body>
   <h3> Using the <i> column-fill CSS property </i> to set the content in columns </h3>
   <div class = "python">
      Python is a versatile programming language widely used for web development, data analysis, machine learning, and
      scientific computing. It has a simple and easy-to-learn syntax, making it a popular choice for beginners.
   </div>
   <div class = "react">
      React is a JavaScript library used for building user interfaces. It allows developers to create reusable UI
      components and efficiently update the DOM as the application state changes. React is widely used for building
      single-page applications and mobile applications.
   </div>
</body>
</html>

Les utilisateurs ont appris à utiliser la propriété CSS column-fill pour définir la manière dont le contenu est affiché entre plusieurs colonnes. Il est recommandé d'utiliser des valeurs d'équilibre pour diviser le contenu de manière égale entre les colonnes de hauteur « auto ». De cette façon, nous pouvons surmonter l'espace inférieur.

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Pourquoi CSS peut-il utiliser de faux éléments ?Article suivant：Pourquoi CSS peut-il utiliser de faux éléments ?

Articles Liés

Voir plus