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

Je sais faire flotter 2 div côte à côte, simplement flotter une à gauche et l'autre à droite.

Mais comment faire cela avec 3 divs ou dois-je simplement utiliser des tables à cet effet?

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>

La manière moderne consiste à utiliser la flexbox CSS , voir les tableaux 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 la grille CSS , voir les tableaux 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>

C'est la même manière 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>

les faire flotter tous à gauche

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

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

ce code que quelqu'un a posté là-haut, il a fait l'affaire !!! lorsque je le colle juste avant de fermer le conteneur DIV, cela aide à effacer tous les DIV suivants de chevaucher avec les DIV que j'ai créés 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 !! :)

Faites flotter les trois divisions vers 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;
}

Je flotte généralement le premier à gauche, le second à droite. Le troisième s'aligne alors automatiquement entre eux.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

<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 façon est que vous pouvez définir chaque largeur de colonne indépendamment de l'autre tant que vous la maintenez sous 100%, si vous utilisez 3 x 30%, les 10% restants sont divisés en un espace de séparation de 5% entre les colonnes

vous pouvez flotter: à gauche pour chacun d'eux et définir la largeur à 33,333%

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>

Je n'ai pas vu la réponse bootstrap, donc 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ù.

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 enfermer les divs sur 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 ne casse pas sur les anciens IE.

Mais ça marche dans Chrome?

Flotter chaque div et mettre à l'écart; les deux pour la rangée. Pas besoin de définir des largeurs si vous ne le souhaitez 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;

}

Voici comment j'ai réussi à faire quelque chose de similaire à ceci dans 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;
}

@Leniel cette méthode est bonne mais vous devez ajouter de la largeur à tous les div flottants. 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 plutôt que d'en ajouter inline style, ce qui n'est pas une bonne pratique.

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

Vous pouvez trouver des détails sur la façon d'utiliser clearfix div ici