Comment flotteur 3 divs côte à côte à l'aide de CSS?

Je sais comment faire 2 divs flotter côte à côte, tout simplement flotter un à gauche et l'autre vers la droite.

Mais comment faire avec 3 divs ou devrais-je simplement utiliser des tableaux pour cela?

  • Pas assez d'informations. Quelle est la largeur de l'couches?
  • J'avais display: inline-block ces gars-là plutôt que de les faire flotter. Si leurs largeurs sont au total moins de la largeur du conteneur ils vont s'asseoir les uns à côté des autres.
  • Je recommande l'utilisation de "display: table". Il est le plus facile à gérer et des solutions fiables. voir stackoverflow.com/questions/14070787/...
InformationsquelleAutor Dameon | 2010-01-28
  1. 288

    Suffit de leur donner une largeur et une float: left;, voici un exemple:

    <div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>
    • Que faire si vous le souhaitez à tous de s'élargir, comme la page est développée?
    • simplement utiliser % au lieu de px
    • Pourriez-vous préciser les raisons d'utiliser <br style="clear: left;" /> avec ce style en particulier.
    • c'est un clearfix, pour éviter d'avoir le parent de l'effondrement.
    • comme @Nick Craver expliqué, vous devriez donner à l'ensemble de vos éléments de la float: left de la propriété. Cela se produit parce que le flotteur de la propriété spécifie la façon dont l'élément est placé le long du côté gauche ou droit de son conteneur parent.
    InformationsquelleAutor Nick Craver
  2. 113

    La façon moderne est d'utiliser le CSS flexbox, voir tables de soutien.

    CSS:

    .container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

    HTML:

    <div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

    Vous pouvez également utiliser grille CSS, voir tables de soutien.

    CSS:

    .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}

    HTML:

    <div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

    • Génial, c'est génial!
    • L'option grille est vraiment à portée de main.
    InformationsquelleAutor Stickers
  3. 51

    C'est comme vous l'avez fait pour les deux divs, juste flotter la troisième à gauche ou à droite.

    <style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
    • Mais la DIV est un élément de niveau bloc, non? Alors comment se fait ils sont placés côte à côte et non pas dans les prochaines lignes(comme les éléments de niveau bloc de début et de fin avec un saut de ligne). Flotter avoir quelques autres d'effet sur elle aussi?
    InformationsquelleAutor Sarfraz
  4. 24

    flotter toute la gauche

    assurez-vous que la largeur est spécifié qu'ils peuvent tenir dans leur conteneur (soit une autre div ou de la fenêtre), sinon ils vont envelopper

    InformationsquelleAutor davidosomething
  5. 22
    <br style="clear: left;" />

    que le code que quelqu'un a posté là-haut, il a fait le tour!!!
    quand je colle juste avant la fermeture de la DIV Conteneur, il permet d'effacer tous les DIVs de chevauchement avec des DIVs, j'ai créé côte-à-côte en haut!

    <div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

    tadaa!! 🙂

    InformationsquelleAutor Migisha
  6. 15

    Float tous les trois divisions de la gauche. Comme ici:

    .first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}
    • Le point est que ma réponse est la plus correcte et, quand une personne sera à la recherche de ce Q sur internet, ils viendront à travers ma réponse, qui serait la plus utile pour eux.
    • Cela peut être. Mais elle est dépourvue de toute explication. Il est ok sur ce site pour copier d'autres réponses, la fusion de plusieurs éléments de réponses dans un combiné meilleure réponse. Vous pouvez modifier et de compléter le vôtre. Cependant les nouveaux utilisateurs ont quelques restrictions (upvoting, quelques liens), donc je voudrais encore vous recommandons de ne pas concentrer sur les anciens et les réponses aux questions.
    • merci, je vais le conserver pour référence future.
    InformationsquelleAutor Arwen
  7. 9

    J'ai l'habitude de juste flotter la première à gauche, deuxième à droite. La troisième aligne automatiquement entre eux, puis.

    <div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
    • Ne pas causer des dégâts-ups lorsque le navigateur est redimensionnée?
    InformationsquelleAutor Nick Travers
  8. 8
    <style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

    l'avantage de cette manière est que vous pouvez définir la largeur de chaque colonne indépendante de l'autre aussi longtemps que vous le garder en dessous de 100%, si vous utilisez 3 x 30%, les 10% restant se répartissent comme 5% diviseur de l'espace entre les colonnes

    InformationsquelleAutor SugaComa
  9. 6

    vous pouvez float: left pour tous, et de définir la largeur de 33.333%

    InformationsquelleAutor Daniel A. White
  10. 6

    essayez d'ajouter "display: block" pour le style

    <style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
    InformationsquelleAutor Ann
  11. 4

    Je préfère cette méthode, les flotteurs sont mal pris en charge dans les anciennes versions d'IE (vraiment?...)

    .column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

    Mise à JOUR :
    Bien sûr, pour utiliser cette technique, et en raison du positionnement absolu, vous devez placer les divs sur un récipient et faire un post-traitement pour définir la hauteur de si, quelque chose comme ceci: 

    jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

    Pas la chose la plus étonnante dans le monde, mais au moins ne pas se casser sur les anciens IEs.

    • Bien sûr, pour utiliser cette technique, et en raison du positionnement absolu, vous devez placer les divs sur un récipient et faire un post-traitement pour définir la hauteur de si, quelque chose comme ceci:
    • jQuery(document).ready(function(){ jQuery('.main').height(Math.max(jQuery('.column-left').height(),jQuery('.column-right').height(),jQuery('.column-center').height())); }); Pas la chose la plus étonnante dans le monde, mais au moins ne pas se casser sur les anciens IEs.
    InformationsquelleAutor jpbourbon
  12. 4

    Je n'ai pas vu le bootstrap réponse, donc pour ce que ça vaut la peine:

    <div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

    laisser Bootstrap comprendre les pourcentages.
    J'aime pour effacer à la fois, juste au cas où.

    • Dans le bootstrap 4, je pense que vous avez de l'envelopper le tout dans une div avec la classe row.
    InformationsquelleAutor John Grabauskas
  13. 3

    Mais ça fonctionne dans Chrome?

    Flotter chaque div et de définir de façon claire;à la fois pour la ligne. Pas besoin de régler les largeurs si vous ne voulez pas. Fonctionne dans Chrome 41,Firefox 37, c'est à dire 11

    Cliquez sur pour JS Fiddle

    HTML

    <div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

    CSS

    .stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}
    InformationsquelleAutor AndrewD
  14. 2

    Voici comment j'ai réussi à faire quelque chose de semblable à l'intérieur d'un <footer> élément:

    <div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

    CSS:

    .content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}
    InformationsquelleAutor Leniel Maccaferri
  15. 1

    @Leniel cette méthode est bonne, mais vous devez ajouter la largeur de toutes les div flottante du. Je dirais que faire de largeur égale ou attribuer une largeur fixe. Quelque chose comme

    .content-wrapper > div { width:33.3%; }

    vous pouvez attribuer des noms de classe pour chaque div plutôt que d'ajouter inline style, ce qui n'est pas une bonne pratique.

    Assurez-vous d'utiliser un clearfix div ou clair div pour éviter de suivre le contenu reste en dessous de ces divisions.

    Vous pouvez trouver les détails de comment utiliser clearfix div ici

    InformationsquelleAutor aquaaarian