5 façons d'afficher deux divisions côte à côte avec CSS

Apprenez à afficher deux div côte à côte avec CSS en utilisant cinq méthodes différentes : inline-block, flexbox, grid, float et table. Ce didacticiel étape par étape vous apprendra les avantages et les inconvénients de chaque méthode, afin que vous puissiez choisir celle qui convient le mieux à vos besoins.

En HTML , il existe deux types d'éléments en ligne et d'éléments de bloc. Les éléments en ligne peuvent placer des éléments les uns à côté des autres mais ils ne prennent pas en charge les propriétés de hauteur et de largeur par défaut et les éléments de bloc prennent en charge les propriétés de largeur et de hauteur par défaut, mais nous ne pouvons pas. placer des éléments de bloc comme deux div côte à côte

Nous pouvons donc voir ici comment nous pouvons le faire fonctionner

nous verrons comment les div peuvent se placer les uns à côté des autres de 5 manières différentes

  • display: inline-block (tradional way)
  • css flexbox method
  • css grid method
  • display: table method
  • float property

Utilisation de l'affichage : bloc en ligne

display : la propriété inline-block permet de placer les éléments de bloc les uns à côté des autres

Mais nous devons ajouter une propriété de largeur supplémentaire à l'élément block car l'élément block prend par défaut une largeur de 100 %

par exemple.

<!DOCTYPE html>
<head>
</head>
<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>
</html>

//css

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ce8888;
  
}

et la sortie sera

veuillez vérifier l'exemple ici

Utiliser Flexbox

flexbox est une manière moderne de concevoir la mise en page d'une page Web et flexbox n'est pas une propriété unique, son module complet possède un certain nombre de fonctionnalités.

voyons comment aligner les divs les uns à côté des autres en utilisant flexbox

//fichier html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="container">
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
  </body>
</html>

// fichier css

.container {
  display: flex;
}
.item {
  background: #ce8888;
  flex-basis: 100px;
  height: 100px;
  margin: 5px;
}

//sortir

display : propriété flex donnée au conteneur qui crée un élément enfant dans un contexte flexible et aligne les div les uns à côté des autres

Dans l'exemple ci-dessus, vous pouvez voir que nous avons utilisé la propriété flex-basis qui est utilisée pour donner la largeur minimale de l'élément. 

veuillez trouver une démo ici

Utiliser la grille CSS

La grille CSS est une autre excellente approche pour concevoir une page Web et c'est un module complet qui comprend un certain nombre de fonctionnalités.

Voyons comment afficher les divs côte à côte en utilisant la grille CSS

//html

<!DOCTYPE html>
<html>
  <head>
    <title>Grid Example</title>
    <style>
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
      </div>
      <div class="item">
      </div>
    </div>
  </body>
</html>

//fichier css

 .container {
        display: grid;
        grid-template-columns: 100px 100px; 
        grid-template-rows: 100px;
        grid-column-gap: 5px;
      }
      
      .item {
      background: #ce8888;
 
       
      }

et la sortie sera

affichage des propriétés : la grille active la structure de disposition de la grille

Dans le fichier CSS, la propriété grid-template-columns permet de diviser la page en nombre de colonnes, nous avons donné 100px deux fois puis cela créera deux colonnes

Trouvez la démo ici

Utilisation du tableau d'affichage

display : la propriété table est une alternative à la balise <table>

voyons comment nous pouvons afficher les div côte à côte en utilisant la propriété display: table

//fichier html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="container">
    <div class="table-row">
     <div class="table-cell">
      
      </div>
      <div class="table-cell">
       
      </div>
    </div>
  </div>
  </body>
</html>

//fichier css

.container {
  display: table;
  width: 20%;
}
.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

et la sortie sera

veuillez trouver une démo ici

vous pouvez coder l'affichage ci-dessus : exemple de tableau en utilisant la balise de table HTML également comme ci-dessous

//fichier html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
  <table class="container">
    <tr class="table-row">
     <td class="table-cell">
      
      </td>
      <td class="table-cell">
       
      </td>
    </tr>
  </table>
  </body>
</html>

//fichier css

.container {
  display: table;
  width: 20%;
}
.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

et la sortie sera

Utilisation de la propriété Float

La  float propriété CSS place un élément sur le côté gauche ou droit de son conteneur, permettant au texte et aux éléments en ligne de s'enrouler autour de lui. L'élément est supprimé du flux normal de la page, tout en restant une partie du flux

voyons comment afficher les div côte à côte en utilisant float

//fichier html

<!DOCTYPE html>
<head>
</head>
<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>
</html>

//fichier css

.element {
  float: left;
  width: 100px;
  height: 100px;
  background: #ce8888;
  margin: 5px
  
}

et la sortie sera

Veuillez trouver la démo ici

Conclusion:

Il existe plusieurs façons d’aligner les div les uns à côté des autres, mais la question est de savoir laquelle est la meilleure.

Cela dépend totalement des besoins

Flexbox et la grille CSS sont des moyens modernes de mise en page d'une page Web. Il s'agit d'un module complet doté d'un certain nombre de fonctionnalités. Je recommande flexbox ou la grille CSS si vous devez mettre en page toute la page.

Si vous avez des exigences minimales, affichez : inline-block est l'option parfaite.

Si vous l'aimez, partagez, car partager, c'est bienveillant ?

#css 

1.45 GEEK