Comment créer une mise en page à 3 colonnes avec CSS sans modifier le HTML ?

Comment créer une mise en page à 3 colonnes avec CSS sans modifier le HTML

En utilisant HTML, vous disposez d'un conteneur contenant trois colonnes, chacune avec une classe distincte (« colonne-gauche », « colonne-centre » et « colonne-droite »). Le but est de disposer ces colonnes horizontalement sans modifier la structure HTML via CSS.

SOLUTION

Pour réaliser cette mise en page souhaitée, intégrez les règles CSS suivantes :

.column-left {
  float: left;
  width: 33.333%;
}

.column-right {
  float: right;
  width: 33.333%;
}

.column-center {
  display: inline-block;
  width: 33.333%;
}

Ce CSS garantit que les colonnes de gauche et de droite flottent sur leurs côtés respectifs du conteneur, tandis que la colonne centrale est affichée dans le reste space.

DEMO

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

SYSTÈME DE GRILLE AMÉLIORÉ

Pour étendre cette approche à plusieurs colonnes, envisagez de créer un système de grille simple. Pour une mise en page à cinq colonnes, par exemple, le CSS suivant suffirait :

.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%;
}

Avec cette grille améliorée, vous pouvez positionner les colonnes avec précision en appliquant des classes de décalage ou d'encart appropriées.

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!