Maison > Article > interface Web > Comment définir la longueur en CSS pour définir l'écart entre les colonnes ?
Comment définir la longueur en CSS pour définir l'écart entre les colonnes ?
- 王林avant
- 2023-09-04 11:45:021087parcourir
CSS est un outil puissant de développement Web qui permet aux développeurs de créer des mises en page multi-colonnes pour le contenu textuel des pages Web. Les colonnes constituent un moyen efficace de diviser de longs blocs de texte en morceaux plus faciles à gérer. Un aspect important des colonnes CSS réside dans les écarts entre elles.
Différentes façons de définir l'espacement des colonnes en CSS
Voici quelques-unes des nombreuses façons de définir des espaces entre les colonnes en CSS.
1. Utilisez l'attribut d'espacement de colonne
La propriétécolumn-gap est le moyen le plus courant de définir l'écart entre les colonnes. Cette propriété définit l'espacement entre les colonnes dans une disposition à plusieurs colonnes. Il s'agit d'une propriété abrégée qui combine les propriétés column-rule-width et column-rule-style. Par exemple -
.column-container {
column-count: 3;
column-gap: 20px;
}
Dans le code CSS ci-dessus, pour créer trois colonnes, nous définissons la propriété column-count sur 3 et la propriété column-gap sur 20 pixels pour définir l'espace central.
La traduction chinoise deExemple 1
est :Exemple 1
Définissez une valeur de pixel fixe pour les espaces entre les colonnes.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightgray;
}
h2 {
text-align:center;
}
.column-container {
column-count: 3;
column-gap: 20px;
column-rule: 3px solid;
}
</style>
</head>
<body>
<h2>Setting the column gap using the column-gap Property</h2>
<div class="column-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
</div>
</body>
</html>
2. Utilisez l'attribut d'écart
La propriété gap est une nouvelle propriété CSS qui a été introduite dans CSS Grid. Nous pouvons également l'utiliser pour définir l'espacement entre les colonnes. Il s'agit d'un attribut abrégé qui permet aux développeurs de combiner les attributs d'espacement de ligne et d'espacement de colonne. Par exemple -
.column-container {
column-count: 4;
gap: 15px;
}
Dans le code CSS ci-dessus, pour créer quatre colonnes, nous définissons la propriété column-count sur 4 et la propriété column-gap sur 15 pixels pour définir l'espace central.
Exemple 2
Utilisez l'attribut gap pour définir une valeur de pixel fixe pour les espaces entre les colonnes.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
h2 {
text-align: center;
}
.column-container {
column-count: 4;
gap: 15px;
column-rule: 3px dotted;
}
</style>
</head>
<body>
<body>
<h2>Setting the column gap using the gap Property </h2>
<div class="column-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</body>
</html>
3. Utiliser des variables CSS
Les variables CSS sont des propriétés personnalisées qui offrent un moyen flexible de définir les espaces entre les colonnes dans les mises en page à plusieurs colonnes. Il permet aux développeurs de définir des valeurs réutilisables. Par exemple :
:root {
--column-gap: 20px;
}
.column-container {
column-count: 3;
column-gap: var(--column-gap);
}
Dans le code CSS ci-dessus, nous avons défini une variable CSS appelée --column-gap et défini sa valeur sur 20 pixels et l'avons appelée dans la fonction var(). Pour créer trois colonnes, nous définissons la propriété column-count sur 3.
La traduction chinoise deExemple 3
est :Exemple 3
Utilisez des variables CSS pour définir des valeurs de pixels fixes pour l'espacement des colonnes.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightgray;
}
h2 {
text-align:center;
}
.my-container {
column-count: 3;
column-gap: var(--column-gap);
column-rule: 3px dotted;
}
</style>
</head>
<body>
<h2>Setting the column gap using the CSS variable</h2>
<div class="my-container" style="--column-gap: 20px";>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
</div>
</body>
</html>
Conclusion
Dans l'article ci-dessus, nous avons discuté de plusieurs façons de définir les espaces entre les colonnes, notamment l'attribut column-gap, l'attribut gap et les variables CSS. Dans l’ensemble, définir des espaces entre les colonnes en CSS est une technique utile pour organiser le contenu Web.
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!