HTML Élément Div
L'élément <div> est utilisé comme conteneur pour d'autres éléments HTML.
L'élément <div>
L'élément <div> est par défaut un élément de bloc, ce qui signifie qu'il prend toute la largeur disponible et est accompagné de sauts de ligne avant et après.
Exemple
Un élément <div> occupe toute la largeur disponible :
Lorem Ipsum <div>Je suis un div</div> dolor sit amet.
Résultat
Try it Yourself »
L'élément <div> n'a aucun attribut requis, mais style, class et id sont courants.
<div> comme conteneur
L'élément <div> est souvent utilisé pour regrouper des sections d'une page Web.
Exemple
Un élément <div> avec des éléments HTML :
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
Résultat
London
London is the capital city of England.
London has over 13 million inhabitants.
Try it Yourself »
Centrer un élément <div>
Si vous avez un élément <div> qui n'est pas large à 100 % et que vous souhaitez l'aligner au centre, définissez le CSS Propriété margin sur auto.
Exemple
<style>
div {
width:300px;
margin:auto;
}
</style>
Résultat
London
London is the capital city of England.
London has over 13 million inhabitants.
Try it Yourself »
Plusieurs éléments <div>
Vous pouvez avoir plusieurs conteneurs <div> sur la même page.
Exemple
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
Résultat
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Try it Yourself »
Aligner les éléments <div> côte à côte
Lors de la création de pages Web, vous souhaitez souvent avoir deux éléments <div> ou plus côte à côte, comme ceci :
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Il existe différentes méthodes pour aligner les éléments côte à côte, toutes incluent un style CSS. Nous examinerons les méthodes les plus courantes :
Flotteur
La propriété CSS float n'était pas initialement destinée à aligner les éléments <div> côte à côte. , mais est utilisé à cette fin depuis de nombreuses années.
La propriété CSS float est utilisée pour positionner et formater le contenu et permettre aux éléments de flotter les uns à côté des autres plutôt que les uns sur les autres.
Exemple
Comment utiliser float pour aligner les éléments div côte à côte :
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Résultat
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Try it Yourself »
Apprenez-en plus sur le float dans notre Tutoriel CSS float.
Bloc en ligne
Si vous modifiez la propriété display de l'élément <div> du block à inline-block, les éléments <div> n'ajouteront plus de saut de ligne avant et après, et seront affichés côte à côte au lieu de les superposer.
Exemple
Comment utiliser display : inline-block pour aligner les éléments div côte à côte :
<style>
div {
width: 30%;
display: inline-block;
}
</style>
Résultat
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Try it Yourself »
Flex
Le module CSS Flexbox Layout a été introduit pour faciliter la conception d'une structure de mise en page réactive et flexible sans utiliser de flottement ou de positionnement.
Pour faire fonctionner la méthode CSS flex, entourez les éléments <div> avec un autre élément <div> et donnez, c'est le statut de conteneur flexible.
Exemple
Comment utiliser flex pour aligner les éléments div côte à côte :
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Résultat
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Try it Yourself »
Apprenez-en plus sur flex dans notre Tutoriel CSS flexbox.
Grid
Le module CSS Grid Layout offre un système de mise en page basé sur une grille, avec des lignes et des colonnes, ce qui facilite la conception de pages Web sans avoir à utiliser de flotteurs ni de positionnement.
Cela ressemble presque à flex, mais peut définir plus d'une ligne et positionner chaque ligne individuellement.
La méthode de grille CSS nécessite que vous entouriez les éléments <div> avec un autre élément <div> et que vous donniez le statut en tant que conteneur de grille et vous devez spécifier la largeur de chaque colonne.
Exemple
Comment utiliser la grille pour aligner les éléments <div> côte à côte :
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
Résultat
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Try it Yourself »
Apprenez-en plus sur la grille dans notre Tutoriel sur les grilles CSS.
Balises HTML
| Étiquette | Description |
|---|---|
| <div> | Définir une section dans un document (niveau bloc) |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des balises HTML.
