web-dev-qa-db-fra.com

Comment faire flotter 3 divs côte à côte en utilisant CSS?

Je sais faire flotter côte à côte deux divs, simplement un à gauche et un à droite.

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

csscss-float
257
Dameon

Donnez-leur simplement une largeur et 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>
288
Nick Craver

La méthode moderne consiste à utiliser la flexbox CSS , voir tables de support .

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}
<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 support .

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>
115
Stickers

C’est la même chose que pour les deux divs, il suffit de faire flotter le troisième à gauche ou à droite aussi.

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

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
51
Sarfraz

flotte tous à gauche

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

24
davidosomething
<br style="clear: left;" />

ce code que quelqu'un a posté là-haut, ça a fait l'affaire !!! Lorsque je le colle juste avant de fermer la DIV Container, il permet d'éviter que toutes les DIV subséquentes ne se superposent aux DIV que j'ai créées côte à côte au sommet!

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

tadaa !! :)

22
Migisha

Flottez les trois div à 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;
}
15
Arwen

D'habitude, je flotte juste le premier à gauche, le second à droite. Le troisième s'aligne automatiquement entre eux alors.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
9
Nick Travers
<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 méthode est que vous pouvez définir la largeur de chaque colonne indépendamment de l'autre tant que vous la maintenez inférieure à 100%. Si vous utilisez 3 x 30%, les 10% restants sont divisés en un espace de séparation de 5% entre les colonnes.

8
SugaComa

essayez d'ajouter "display: block" au style

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


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
6
Ann

vous pouvez flotter: à gauche pour tous et définir la largeur à 33.333%

6
Daniel A. White

Je préfère cette méthode, les flottants sont mal supportés dans les anciennes versions de 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; }

UPDATED: Bien sûr, pour utiliser cette technique et en raison du positionnement absolu, vous devez inclure les divs dans un conteneur et effectuer un post-traitement pour définir la hauteur de if, 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())
    ); 
});

Ce n'est pas la chose la plus étonnante au monde, mais au moins, ça ne casse pas avec les anciens IE.

4
jpbourbon

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

<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;" />

laissez Bootstrap déterminer les pourcentages. J'aime effacer les deux, juste au cas où.

4
John Grabauskas

Mais ça marche dans Chrome?

Flottez chaque div et définissez clairement, les deux pour la ligne. Pas besoin de définir des largeurs si vous ne voulez pas. Fonctionne dans Chrome 41, Firefox 37, IE 11

Cliquez 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;

}
3
AndrewD

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

<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;
}
2
Leniel Maccaferri

@Leniel cette méthode est bonne mais vous devez ajouter de la largeur à toutes les div flottantes. Je dirais de leur donner une largeur égale ou d'attribuer une largeur fixe. Quelque chose comme

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

vous pouvez attribuer des noms de classe à chaque div au lieu d’ajouter inline style, ce qui n’est pas une bonne pratique.

Assurez-vous d’utiliser un clearfix ou un clear div pour éviter que le contenu suivant reste en dessous de ces div.

Vous pouvez trouver des détails sur l'utilisation de clearfix div ici

1
aquaaarian