Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
Quoi de neuf
Nouveaux messages
Nouveaux articles
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Magasin
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
HTML/CSS - Aligner plusieurs div les un à coté des autres
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Daniel.Dev" data-source="post: 7138105" data-attributes="member: 714329"><p style="text-align: center"><img src="https://i.imgur.com/8cWlinp.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center">Bonjour tout le monde, aujourd'hui on se retrouve sur un petit tutoriel <strong>HTML/CSS </strong>pour <strong>aligner plusieurs div les un à coté des autres</strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">T'es prêt ? C'est partie <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /> !</p> <p style="text-align: center"></p> <p style="text-align: center">Commençons par le <strong>HTML</strong> !</p> <p style="text-align: center">[HTML]<div id="container"></p> <p style="text-align: center"> <div class="coller"></p> <p style="text-align: center"> </div></p> <p style="text-align: center"></p> <p style="text-align: center"> <div class="coller"></p> <p style="text-align: center"> </div></p> <p style="text-align: center"></p> <p style="text-align: center"> <div class="clear"></div></p> <p style="text-align: center"></div>[/HTML]</p> <p style="text-align: center"></p> <p style="text-align: center">Nous créons une div <strong>#container</strong> qui contiendra deux div <strong>.coller</strong> côte à côte.</p> <p style="text-align: center"></p> <p style="text-align: center">Voilà le CSS :</p> <p style="text-align: center">[CODE]#container {</p> <p style="text-align: center"> background-color: #FF0000;</p> <p style="text-align: center"> padding: 20px;</p> <p style="text-align: center"> width: 90%;</p> <p style="text-align: center"> height: auto;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.coller {</p> <p style="text-align: center"> width: 45%;</p> <p style="text-align: center"> float: left;</p> <p style="text-align: center"> height: 120px;</p> <p style="text-align: center"> background-color: #FFF;</p> <p style="text-align: center"> border: 1px solid #000;</p> <p style="text-align: center"> margin-right: 20px;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">.clear {</p> <p style="text-align: center"> clear: both;</p> <p style="text-align: center">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Nous mettons notre div <strong>#container</strong> avec un <strong>fond</strong> <strong>rouge</strong> pour mieux voir ce qu'il se passe.</p> <p style="text-align: center">Pour notre div .<strong>coller</strong>, nous utilisons la propriété <strong>float</strong> qui permet d'aligner plusieurs div entre elles, tout simplement.</p> <p style="text-align: center">Et on oublie pas la div <strong>.clear</strong>, qui permet à la div <strong>#container</strong> de se redimensionner correctement avec les div flottant qui s'y trouvent.</p> <p style="text-align: center"></p> <p style="text-align: center"><strong>Voici le code final :</strong></p> <p style="text-align: center"><a href="https://codepen.io/anon/pen/ZyGLQP" target="_blank">https://codepen.io/anon/pen/ZyGLQP</a></p></blockquote><p></p>
[QUOTE="Daniel.Dev, post: 7138105, member: 714329"] [CENTER][IMG]https://i.imgur.com/8cWlinp.png[/IMG] Bonjour tout le monde, aujourd'hui on se retrouve sur un petit tutoriel [B]HTML/CSS [/B]pour [B]aligner plusieurs div les un à coté des autres[/B]. T'es prêt ? C'est partie :) ! Commençons par le [B]HTML[/B] ! [HTML]<div id="container"> <div class="coller"> </div> <div class="coller"> </div> <div class="clear"></div> </div>[/HTML] Nous créons une div [B]#container[/B] qui contiendra deux div [B].coller[/B] côte à côte. Voilà le CSS : [CODE]#container { background-color: #FF0000; padding: 20px; width: 90%; height: auto; } .coller { width: 45%; float: left; height: 120px; background-color: #FFF; border: 1px solid #000; margin-right: 20px; } .clear { clear: both; }[/CODE] Nous mettons notre div [B]#container[/B] avec un [B]fond[/B] [B]rouge[/B] pour mieux voir ce qu'il se passe. Pour notre div .[B]coller[/B], nous utilisons la propriété [B]float[/B] qui permet d'aligner plusieurs div entre elles, tout simplement. Et on oublie pas la div [B].clear[/B], qui permet à la div [B]#container[/B] de se redimensionner correctement avec les div flottant qui s'y trouvent. [B]Voici le code final :[/B] [URL]https://codepen.io/anon/pen/ZyGLQP[/URL][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
HTML/CSS - Aligner plusieurs div les un à coté des autres
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut