Comment Aligner les Divs l'un à Côté de l'Autre?
CSS permet d'aligner les divs l'un à côté de l'autre de plusieurs façons. Nous allons discuter quelques moyens largement utilisés.
La balise <div> est utilisée pour définir les parties d'une page ou d'un document. Elle est utilisée pour regrouper les larges séctions des éléments HTML et les styler avec CSS. Trois ou plus de divs peuvent être mis l'un à côté de l'autre en utilisant CSS. Cela est très facile si vous suivez les pas décrits ci-dessous.
Voyons un exemple et essayons de discuter chaque partie de code ensemble.
1. Créez HTML
- Créez la balise <main> dans la séction <body> avec l'id “boxes” qui doit comprendre notre divs.
- Créez des éléments <div>. Pour notre premier <div>, nous utilisons id avec un nom ”column1”, pour deuxième id “column2”, et pour troisième id “column3”.
- Vous pouvez définir des titres pour votre divs en utilisant la balise <h2>.
<body>
<div id="boxes">
<h2>W3 docs</h2>
<div id="column1">
<h2>Qu'est-ce que le Lorem Ipsum?</h2>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
</div>
<div id="column2">
<h2>Pourquoi l'utiliser?</h2>
On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard.
</div>
<div id="column3">
<h2>D'où vient-il?</h2>
Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique.
</div>
</div>
</body>2. Ajoutez CSS
- Utilisez la propriété float pour définir le côté, auquel les éléments de conteneur doivent être placés. La propriété float a trois valeurs: none, left et right. Dans notre exemple, nous utilisons la valeur left pour les divs.
- Vous pouvez choisir des couleurs pour les images d'arrières-plan en utilisant la propriété background-color. Nous utilisons les valeurs hex pour les images d'arrières-plan.
- Définissez la taille de votre div avec les propriétés CSS width et height.
- Définissez la position pour vos titres en utilisant la propriété text-align .
- Utilisez la propriété CSS clear qui est directement liée à la propriété float. Elle définit qu'un élément doit être à côté ou au dessous des élément flottants.
- Utilisez la propriété content. La propriété content est utilisée avec les pseudo-éléments ::before et ::after pour générer le contenu dans un élément.
- Utilisez la propriété display qui fait se comporter l'élément comme un élément HTML <table>.
#boxes {
content: "";
display: table;
clear: both;
}
div {
float: left;
height: 470px;
width: 23%;
padding: 0 10px;
}
#column1 {
background-color: #a1edcc;
}
#column2 {
background-color: #a0e9ed;
width: 43%;
}
#column3 {
background-color: #f497f1;
}
h2 {
color: #000000;
text-align: center;
}
La propriété float est ignorée si les éléments sont positionnés d'une façon absolue (position: absolute).
Rassemblons les morceaux de code et voyons comment il fonctionne!
Voici le résultat de notre code.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#boxes {
content: "";
display: table;
clear: both;
}
div {
float: left;
height: 470px;
width: 23%;
padding: 0 10px;
}
#column1 {
background-color: #a1edcc;
}
#column2 {
background-color: #a0e9ed;
width: 43%;
}
#column3 {
background-color: #f497f1;
}
h2 {
color: #000000;
text-align: center;
}
</style>
</head>
<body>
<main id="boxes">
<h2>W3docs</h2>
<div id="column1">
<h2>Qu'est-ce que le Lorem Ipsum?</h2>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
</div>
<div id="column2">
<h2>Pourquoi l'utiliser?</h2>
On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du
texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web
ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps,
parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).
</div>
<div id="column3">
<h2>D'où vient-il?:</h2>
Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un
professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique,
découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la
Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
</div>
</main>
</body>
</html>Voyons un autre exemple.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.container {
width: 600px;
height: 190px;
background-color: #5cbbf2;
padding: 35px 15px 5px;
}
.container:before,
.container:after {
content: "";
display: table;
clear: both;
}
.container div {
float: left;
width: 180px;
height: 160px;
}
#box2 {
background-color: #000000;
margin-left: 30px;
margin-right: 30px;
}
p {
color: white;
padding: 5px 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>W3docs</h2>
<div class="container">
<div id="box1">
<img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" style="width: 180px; height: 160px;" />
</div>
<div id="box2">
<p>Nous pouvons créer autant de div que nous le souhaitons côte à côte avec la même hauteur et avec différentes hauteurs.</p>
</div>
<div id="box3">
<img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" style="width: 180px; height: 160px;" />
</div>
</div>
</body>
</html>Dans cet exemple, nous avons utilisées les propriétés CSS padding, margin. La propriété padding crée d'espace sur tous les côtés du contenu d'un élément. La propriété margin en CSS crée un espace autour de l'élément. De plus, vous pouvez choisir n'importe quelle couleur que vous voulez, depuis pipette de couleur pour votre texte.
Voyons un autre exemple.
Exemple
<!DOCTYPE html>
<html>
<title>Titre du document</title>
<head>
<style>
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 310px;
height: 310px;
border: 2px solid green;
}
.box div {
width: 100px;
padding: 15px;
text-align: center;
color: #000000;
font-family: arial, sans-serif;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.gray {
background-color: gray;
}
.pink {
background-color: pink;
}
</style>
</head>
<body>
<h2>Exemple de la propriété flex</h2>
<div class="box">
<div class="green">VERT</div>
<div class="blue">BLEU</div>
<div class="gray">GRIS</div>
<div class="pink">ROSE</div>
</div>
</body>
</html>Voyons un autre exemple.
Voici le résultat de notre code.
<!DOCTYPE html>
<html>
<title>Titre du document</title>
<head>
<style>
.box div {
width: 100px;
display: inline-block;
padding: 15px;
text-align: center;
color: #000000;
font-family: arial, sans-serif;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.gray {
background-color: gray;
}
.pink {
background-color: pink;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Exemple de la propriété flex</h2>
<div class="box">
<div class="green">VERT</div>
<div class="blue">BLEU</div>
<div class="gray">GRIS</div>
<div class="pink">ROSE</div>
<div class="yellow">JAUNE</div>
</div>
</body>
</html>Dans cet exemple, nous avons utilisée la propriété display avec la valeur "inline-block". La valeur "inline-block" affiche un élément comme un conteneur bloc de niveau en ligne. Nous avons utilisée la propriété font-family qui permet de créer une liste priorisée des noms font family et/ou noms de famille générique pour l'élément sélectionné.