• Envoi de vidéos pour la RealityGamingTV

    Salut Visiteur ! Tu as vécu recemment un moment insolite dans un jeu vidéo ?
    Tu peux nous envoyer ton clip insolite pour notre chaine YouTube qu'est RealityGamingTV que ce soit un fail, un win ou un kill épique, nous récupérons plusieurs clips afin d'en faire une compilation.
    Seule la communauté peut nous aider à faire vivre la chaine YouTube !

    Envoyer une vidéo

YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

Tutoriel HTML/CSS - Aligner plusieurs div les un à coté des autres

Inscrit
29 Novembre 2016
Messages
123
J'aime
83
Points
756
Réponse de Daniel.Dev Forums généraux Informatique ⌨️ Programmation Programmation web : HTML/CSS - Aligner plusieurs div les un à coté des autres #1
proxy.php?image=https%3A%2F%2Fi.imgur.com%2F8cWlinp.png&hash=f50e3413ed18abb9e13983c4f580ed4e

Bonjour tout le monde, aujourd'hui on se retrouve sur un petit tutoriel HTML/CSS pour aligner plusieurs div les un à coté des autres.

T'es prêt ? C'est partie :) !

Commençons par le HTML !
HTML:
<div id="container">
    <div class="coller">
    </div>
 
    <div class="coller">
    </div>

  <div class="clear"></div>
</div>
Nous créons une div #container qui contiendra deux div .coller 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;
}
Nous mettons notre div #container avec un fond rouge pour mieux voir ce qu'il se passe.
Pour notre div .coller, nous utilisons la propriété float qui permet d'aligner plusieurs div entre elles, tout simplement.
Et on oublie pas la div .clear, qui permet à la div #container de se redimensionner correctement avec les div flottant qui s'y trouvent.

Voici le code final :
Vous devez vous inscrire pour voir les liens !
 
Inscrit
8 Avril 2017
Messages
13
J'aime
4
Points
546
Réponse de webman2o Forums généraux Informatique ⌨️ Programmation Programmation web : HTML/CSS - Aligner plusieurs div les un à coté des autres #2
pas mal je savais pas cette astuce ^^ merci
 

Lebossdu33

Membre Premium
Premium
Inscrit
2 Avril 2017
Messages
662
J'aime
108
Points
1 006
Réponse de Lebossdu33 Forums généraux Informatique ⌨️ Programmation Programmation web : HTML/CSS - Aligner plusieurs div les un à coté des autres #3
proxy.php?image=https%3A%2F%2Fi.imgur.com%2F8cWlinp.png&hash=f50e3413ed18abb9e13983c4f580ed4e

Bonjour tout le monde, aujourd'hui on se retrouve sur un petit tutoriel HTML/CSS pour aligner plusieurs div les un à coté des autres.

T'es prêt ? C'est partie :) !

Commençons par le HTML !
HTML:
<div id="container">
    <div class="coller">
    </div>
 
    <div class="coller">
    </div>

  <div class="clear"></div>
</div>
Nous créons une div #container qui contiendra deux div .coller 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;
}
Nous mettons notre div #container avec un fond rouge pour mieux voir ce qu'il se passe.
Pour notre div .coller, nous utilisons la propriété float qui permet d'aligner plusieurs div entre elles, tout simplement.
Et on oublie pas la div .clear, qui permet à la div #container de se redimensionner correctement avec les div flottant qui s'y trouvent.

Voici le code final :
Vous devez vous inscrire pour voir les liens !
merci de ton aide pour ce petit cour
 


Discussions similaires

Haut