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


270

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?


3
Pas suffisamment d'informations. Quelle est la largeur des couches?
Josh Stodola

8
Je préfère display: inline-blockces gars plutôt que de les faire flotter. Si leur largeur est au total inférieure à la largeur du conteneur, ils seront assis côte à côte.
Adam Waite

Je recommande d'utiliser "display: table". C'est la solution la plus maintenable et la plus fiable. voir stackoverflow.com/questions/14070787/…
John Henckel

Réponses:


300

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>

6
Que se passe-t-il si vous souhaitez qu'ils se développent tous à mesure que la page est développée?
CodyBugstein

31
@imray utilise simplement% au lieu de px
TehTris

9
Pourriez-vous expliquer pourquoi utiliser <br style="clear: left;" />ce style en particulier.
Mike de Klerk

2
@MikedeKlerk c'est un correctif, pour éviter que le parent ne s'effondre.
Angel Politis

comme @Nick Craver l'a expliqué, vous devez attribuer à tous vos éléments la propriété float: left . Cela se produit car la propriété float spécifie comment l'élément est placé le long du côté gauche ou droit de son conteneur parent .
Nesha Zoric

130

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>


52

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>

3
Mais DIV est un élément de niveau bloc, non? Ensuite, comment se fait-il qu'ils soient placés côte à côte et non dans les lignes suivantes (car les éléments de niveau bloc commencent et se terminent par un saut de ligne). Le flotteur a-t-il également un autre effet?
Ashwin

26

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


23
<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 !! :)


16

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

6
Le fait est que ma réponse est la plus correcte et quand une nouvelle personne recherchera ce Q sur Internet, elle trouvera ma réponse qui lui sera la plus utile.
Arwen

2
CA se peut. Mais il manque d'explication. Il est autorisé sur ce site de copier d'autres réponses, en fusionnant plusieurs réponses partielles en une seule meilleure réponse combinée. Vous pouvez modifier et compléter le vôtre. Cependant, les nouveaux utilisateurs ont quelques restrictions (vote positif, peu de liens), donc je recommanderais toujours de ne pas se concentrer sur les anciennes questions et les réponses.
cfi

@cfi merci, je le garderai pour référence future.
Arwen

10

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>

5
Cela ne provoque-t-il pas des erreurs lorsque le navigateur est redimensionné?
CodyBugstein

10
<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



7

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

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ù.


1
Dans le bootstrap 4, je pense que vous devez envelopper le tout dans un div avec la classe de ligne.
John Grabauskas

5

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.


Bien sûr, pour utiliser cette technique et en raison du positionnement absolu, vous devez enfermer les divs sur un conteneur et faire un post-traitement pour définir la hauteur de if, quelque chose comme ceci:
jpbourbon

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.
jpbourbon

4

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;

}

3

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

2

@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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.