28172 sujets

CSS et mise en forme, CSS3

Alignement 3 blocs avec le CSS

Bonjour,

Je tente d'aligner 3 blocs côte à côte.
Rien à faire, je ne trouve pas la solution!
En fait, le 3ème bloc, celui de droite, ne veut pas se mettre à côté de celui du milieu, il reste en dessous.
Ces trois blocs sont imbriqués dans un div qui fait 880 px de large.

Merci d'avance pour votre éclairage!


#bloc1
{
float:left;
width:280px;
background-color:#FF3366;
}

#bloc2
{
width:280px;
background-color:#9966FF;
margin-left:290px;
}



#bloc3
{
width:280px;
margin-left: 600px;
background-color:blue;
}

Modifié par _laurent (03 Aug 2020 - 11:23)
Modérateur
Coucou,

Je ne connais pas trop le besoin qu'il ya derriere mais plutot que d'utiliser float je te propose d'utiliser Flex : https://jsfiddle.net/undless/s9ufkm46/

<div class="wrapper">
  <div id="bloc1" class="bloc">1</div>
  <div id="bloc2" class="bloc">2</div>
  <div id="bloc3" class="bloc">3</div>
</div>

.wrapper {
  width: 880px;
  display: flex;
}
  .bloc {
    flex: 1 1;
  }
  #bloc1 {
    background-color:#FF3366;
  }
  #bloc2 {
    background-color:#9966FF;
  }
  #bloc3 {
    background-color:blue;
  }
Administrateur
Hello,

Je suis de l'avis de Laurent : les positionnements tels que Flexbox ou Grid Layout sont bien mieux conçus pour "designer" des pages aujourd'hui que les anciennes bidouilles en Float.

Dans ton cas, et si tu souhaites absolument conserver les Float, ce qui pose problème sont les margin-left. Cela devrait passer si tu les supprimes.

Bonne journée,

Raphaël
Merci à vous!
Je ne connaissais pas Flexbox, je ne me suis pas tenue informée des évolutions en matière de CSS ;-D

Mes blocs sont gentiment alignés maintenant.
Smiley lol


Par contre, le bloc n°1 reste plus large que les deux autres, même si j'attribue des dimensions.
J

  .bloc {
    flex: 1 1;
  }
C'est réglé! Merci!
J'ai modifié les dimensions des blocs.
Elles étaient trop petites en largeur, et je pense que par défaut, le premier bloc s'élargit pour entrer dans le conteneur principal..

Merci!
Modifié par mailbox13630 (03 Aug 2020 - 15:02)
Modérateur
Alors pour fixer la largeur des 3 blocs à 250px tu peux faire :
.bloc {
    flex: 0 0 250px;
    width: 250px;
  }

Par contre tu perds tout le bénéfice du flex qui s'adapte et qui permet d'etre très souple.
Pourquoi ton premier bloc est plus large ? Tu as une image dedans ?
Non, pas d'image, mais le wrapper fait 880 px.
J'avais 250 px pour chacun des 3 blocs. (750 px en tout)
Les 100 px qui manquaient se sont mis par défaut sur le premier bloc, c'est pour ça, je pense, qu'il était plus large que les deux autres.

Merci pour ce petit cours qui me sera très utile!
Modérateur
Alors normalement si tu avais bien mis 
flex: 1 1;

à tes 3 block normalement ils se partagent équitablement la place. Si tu as mis flex: 1 1; seulement a ton premier bloc alors oui ca donne le comportement que tu as décris.

Flex c'est un condensé de flex-grow, flex-shrink et flex-basis. Pour plus de détail tu peux regarder les définitions et tester : https://developer.mozilla.org/fr/docs/Web/CSS/flex

Tu veux que tes blocs gardent pile cette taille ? L'idée et la force du flex c'est justement de ne pas donner de taille pour avoir un design fluide selon la largeur disponnible.
Sujet clos
Aller à