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