Maison > interface Web > tutoriel CSS > Comment créer une mise en page horizontale à trois colonnes avec CSS uniquement, sans modifier la structure HTML ?

Comment créer une mise en page horizontale à trois colonnes avec CSS uniquement, sans modifier la structure HTML ?

Linda Hamilton
Libérer: 2024-11-12 07:06:02
original
578 Les gens l'ont consulté

How can I create a three-column horizontal layout with CSS only, without modifying the HTML structure?

Mise en page à 3 colonnes avec CSS uniquement

En HTML, vous avez une mise en page avec trois colonnes disposées verticalement :

<div class="container">
   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>
</div>
Copier après la connexion

Vous souhaitez disposer ces colonnes horizontalement, à l'image de la grille ci-dessous, sans altérer la structure HTML :

----------------------------------------------------
|              |                   |               |
| Column left  |   Column center   | Column right  |
|              |                   |               |
----------------------------------------------------
Copier après la connexion

Pour y parvenir, utilisez les propriétés CSS :

.column-left{ float: left; width: 33.333%; }
.column-right{ float: right; width: 33.333%; }
.column-center{ display: inline-block; width: 33.333%; }
Copier après la connexion

Voir le démo en direct ici.

Pour un système de grille plus flexible, créez un système de grille avec un plus grand nombre de colonnes :

.column {
    float: left;
    position: relative;
    width: 20%;
    
    /*for demo purposes only */
    background: #f2f2f2;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

.column-offset-1 {
    left: 20%;
}
.column-offset-2 {
    left: 40%;
}
.column-offset-3 {
    left: 60%;
}
.column-offset-4 {
    left: 80%;
}

.column-inset-1 {
    left: -20%;
}
.column-inset-2 {
    left: -40%;
}
.column-inset-3 {
    left: -60%;
}
.column-inset-4 {
    left: -80%;
}
Copier après la connexion

Et utilisez le HTML comme ceci :

<div class="container">
   <div class="column column-one column-offset-2">Column one</div>
   <div class="column column-two column-inset-1">Column two</div>
   <div class="column column-three column-offset-1">Column three</div>
   <div class="column column-four column-inset-2">Column four</div>
   <div class="column column-five">Column five</div>
</div>
Copier après la connexion

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal