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 occupe 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
L'élément <div> n'a pas d'attributs requis, mais les attributs 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>Londres</h2>
<p>Londres est la capitale de l'Angleterre.</p>
<p>Londres compte plus de 9 millions d'habitants.</p>
</div> Résultat
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Centrer un élément <div>
Si vous avez un élément <div> qui n'est pas large de 100 %, et que vous souhaitez le centrer, définissez la propriété CSS margin sur auto .
Exemple
<style>
div {
width:300px;
margin:auto;
}
</style> Résultat
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Plusieurs éléments <div>
Vous pouvez avoir plusieurs conteneurs <div> sur la même page.
Exemple
<div>
<h2>Londres</h2>
<p>Londres est la capitale de l'Angleterre.</p>
<p>Londres compte plus de 9 millions d'habitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo est la capitale de la Norvège.</p>
<p>Oslo compte plus de 700 000 habitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome est la capitale de l'Italie.</p>
<p>Rome compte plus de 4 millions d'habitants.</p>
</div> Résultat
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Oslo
Oslo est la capitale de la Norvège.
Oslo compte plus de 700 000 habitants.
Rome
Rome est la capitale de l'Italie.
Rome compte plus de 4 millions d'habitants.
Aligner les éléments <div> côte à côte
Lors de la création de pages web, vous souhaitez souvent avoir deux ou plusieurs éléments <div> côte à côte, comme ceci :
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Oslo
Oslo est la capitale de la Norvège.
Oslo compte plus de 700 000 habitants.
Rome
Rome est la capitale de l'Italie.
Rome compte plus de 4 millions d'habitants.
Il existe différentes méthodes pour aligner les éléments côte à côte, toutes nécessitant un certain style CSS. Nous allons examiner les méthodes les plus courantes :
Flottant
La propriété CSS float n'était pas à l'origine destinée à aligner les éléments <div> côte à côte, mais a été utilisée à cette fin pendant de nombreuses années.
La propriété CSS float est utilisée pour positionner et formater le contenu et permet aux éléments d'être positionnés horizontalement, plutôt que verticalement.
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
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Oslo
Oslo est la capitale de la Norvège.
Oslo compte plus de 700 000 habitants.
Rome
Rome est la capitale de l'Italie.
Rome compte plus de 4 millions d'habitants.
En savoir plus sur float dans notre tutoriel CSS float .
Inline-block
Si vous changez la propriété display de l'élément <div> de 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 d'être empilés.
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
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Oslo
Oslo est la capitale de la Norvège.
Oslo compte plus de 700 000 habitants.
Rome
Rome est la capitale de l'Italie.
Rome compte plus de 4 millions d'habitants.
Flex
Le module de mise en page Flexbox CSS a été introduit pour faciliter la conception de structures de mise en page réactives flexibles sans utiliser de flottement ou de positionnement.
Pour faire fonctionner la méthode flex CSS, entourez les éléments <div> avec un autre élément <div> et donnez-lui le statut de conteneur flex.
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
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Oslo
Oslo est la capitale de la Norvège.
Oslo compte plus de 700 000 habitants.
Rome
Rome est la capitale de l'Italie.
Rome compte plus de 4 millions d'habitants.
En savoir plus sur flex dans notre tutoriel CSS flexbox .
Grille
Le module de mise en page CSS Grid offre un système de mise en page basé sur une grille, avec des lignes et des colonnes, facilitant la conception de pages web sans avoir à utiliser des flottants et du positionnement.
Cela semble presque identique à flex, mais a la capacité de définir plus d'une ligne et de 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 lui donniez le statut de 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
Londres
Londres est la capitale de l'Angleterre.
Londres compte plus de 9 millions d'habitants.
Oslo
Oslo est la capitale de la Norvège.
Oslo compte plus de 700 000 habitants.
Rome
Rome est la capitale de l'Italie.
Rome compte plus de 4 millions d'habitants.
En savoir plus sur la grille dans notre tutoriel CSS grid .
Balises HTML
| Balise | Description |
|---|---|
| <div> | Définit 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 .