452 votes

serg avatar

Comment aligner 3 divs (gauche/centre/droite) à l'intérieur d'un autre div ?

Demandé el 8 de Avril, 2010
Quand la question a-t-elle été
192009 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je veux avoir 3 divs alignés à l'intérieur d'un div conteneur, quelque chose comme ceci :

[[LEFT]       [CENTER]        [RIGHT]]

La division du conteneur est large de 100 % (aucune largeur définie), et la division centrale doit rester au centre après le redimensionnement du conteneur.

Alors j'ai mis :

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Mais ça le devient :

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Des conseils ?

Demandé el 8 de Avril, 2010 par serg

1 votes

Avatar de inkedmn

Si le conteneur devient plus étroit que 300px de large, cela se produira à moins que vous ne définissiez la propriété overflow.

Commenté el 8 de Avril, 2010 par inkedmn

0 votes

Avatar de Manoj Kumar

Flexbox et aussi Grid : jsfiddle.net/w0s4xmc0/12963

Commenté el 23 de Juin, 2018 par Manoj Kumar

0 votes

Avatar de Chris L

Juste une remarque - Comme dans le commentaire de @inkedmn, avec un tas de contenu dans chaque colonne, je n'ai pas réussi à les aligner correctement quelle que soit la largeur du conteneur sans overflow: hidden; sur le center colonne. Ensuite, dans la requête média pour les petits appareils, lorsque les trois colonnes sont centrées les unes sur les autres sur la page, j'avais besoin de overflow: hidden; sur la rangée du milieu (qui était la colonne de droite sur les grands appareils), sinon elle n'avait pas de hauteur et n'était pas centrée verticalement entre les rangées du haut et du bas.

Commenté el 24 de Mai, 2020 par Chris L

Réponses

Trop de publicités?

399voto

dkamins avatar
dkamins Points 10565

Avec cette CSS, placez vos divs comme suit (les flottants en premier) :

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S. Vous pouvez aussi flotter à droite, puis à gauche, puis au centre. L'important est que les flotteurs viennent avant la section centrale "principale".

P.P.S. Vous voulez souvent être le dernier à l'intérieur #container cet extrait : <div style="clear:both;"></div> ce qui permettra d'étendre #container verticalement pour contenir les deux flotteurs latéraux, au lieu de prendre sa hauteur uniquement à partir des éléments suivants #center et en permettant éventuellement aux côtés de dépasser du fond.

Répondu el 8 de Avril, 2010 par dkamins (10565 Points )

0 votes

Avatar de Tiago

Comment feriez-vous si le conteneur n'était pas à 100% ? J'essaie quelque chose comme ça ici, je voudrais que le div reste à droite du conteneur, mais il flotte à droite de la page.

Commenté el 9 de Novembre, 2010 par Tiago

1 votes

Avatar de James Poulson

@Tiago : Les flottants devraient rester contraints au div s'ils sont à l'intérieur de celui-ci. Vérifiez la largeur du conteneur en le définissant comme suit border:solid . Si elle est de 100%, enfermez-la dans un autre div pour la positionner dans votre page.

Commenté el 15 de Juillet, 2011 par James Poulson

0 votes

Avatar de Tapefreak

En outre, si vous placez ces éléments dans un conteneur redimensionnable, veillez à définir une largeur minimale pour le conteneur afin d'éviter que la division flottant à droite ne soit repoussée vers le bas.

Commenté el 9 de Novembre, 2012 par Tapefreak
Afficher 4 autres commentaires

141voto

fruechtemuesli avatar
fruechtemuesli Points 271

Si vous ne voulez pas changer votre structure HTML, vous pouvez aussi le faire en ajoutant text-align: center; à l'élément wrapper et un display: inline-block; à l'élément centré.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Démonstration en direct : http://jsfiddle.net/CH9K8/

Répondu el 11 de Janvier, 2013 par fruechtemuesli (271 Points )

5 votes

Avatar de mortalis

C'est parfait lorsque les tailles gauche et droite sont égales. Sinon, le centre n'est pas centré.

Commenté el 26 de Décembre, 2017 par mortalis

23voto

Rajiv Pingale avatar
Rajiv Pingale Points 611

La propriété Float n'est en fait pas utilisée pour aligner le texte.

Cette propriété est utilisée pour ajouter un élément à droite, à gauche ou au centre.

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

pour float:left La sortie sera [First][second][Third]

pour float:right La sortie sera [Third][Second][First]

Cela signifie que la propriété float => left ajoutera l'élément suivant à la gauche du précédent, de même pour la propriété right.

Vous devez également tenir compte de la largeur de l'élément parent, si la somme des largeurs des éléments enfants dépasse la largeur de l'élément parent, l'élément suivant sera ajouté à la ligne suivante.

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[Premier] [Second]

[Troisième]

Vous devez donc tenir compte de tous ces aspects pour obtenir un résultat parfait.

Répondu el 12 de Novembre, 2011 par Rajiv Pingale (611 Points )

14voto

Eric Wanchic avatar
Eric Wanchic Points 421

J'aime que mes barres soient serrées et dynamiques. Ceci est pour CSS 3 et HTML 5

  1. Tout d'abord, fixer la largeur à 100px est limitatif. Ne le faites pas.

  2. Deuxièmement, la définition de la largeur du conteneur à 100% fonctionnera bien, jusqu'à ce que nous parlions d'une barre d'en-tête/pied de page pour l'ensemble de l'application, comme une barre de navigation ou de crédits/copyright. Utilisez right: 0; à la place pour ce scénario.

  3. Vous utilisez des identifiants (hash #container , #left etc.) au lieu de classes ( .container , .left ), ce qui est bien, sauf si vous voulez répéter votre modèle de style ailleurs dans votre code. J'envisagerais d'utiliser des classes à la place.

  4. Pour le HTML, il n'est pas nécessaire d'intervertir l'ordre pour : gauche, centre, et droite. display: inline-block; corrige cela, en ramenant votre code à quelque chose de plus propre et de logiquement ordonné à nouveau.

  5. Enfin, vous devez effacer tous les flotteurs pour que cela n'affecte pas les futures <div> . Pour cela, il faut utiliser le clear: both;

Pour résumer :

HTML :

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS :

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Point bonus si vous utilisez HAML et SASS ;)

HAML :

.container
  .left
  .center
  .right
  .clear

SASS :

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
Répondu el 26 de Mai, 2014 par Eric Wanchic (421 Points )

0voto

Sam avatar
Sam Points 3542

Voici les modifications que j'ai dû apporter à la réponse acceptée lorsque j'ai fait cela avec un image comme élément central :

  1. Assurez-vous que l'image est enfermée dans un div ( #center dans ce cas). Si ce n'est pas le cas, vous devrez définir le paramètre display a block et il semble être centré par rapport à l'espace entre les éléments flottants.

  2. Veillez à définir la taille de l'image. y son conteneur :

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
Répondu el 27 de Mai, 2013 par Sam (3542 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X