Wie schwebe ich 3 Divs mit CSS nebeneinander?

Ich weiß, wie man 2 Divs nebeneinander schweben lässt, einfach eins nach links und das andere nach rechts.

Aber wie mache ich das mit 3 Divs oder sollte ich nur Tabellen für diesen Zweck verwenden?

Geben Sie ihnen einfach eine Breite und float: left;hier ein Beispiel:

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

Der moderne Weg ist die Verwendung der CSS-Flexbox , siehe Support-Tabellen .

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

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

Sie können auch das CSS-Raster verwenden (siehe Supporttabellen) .

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

Es ist genauso wie bei den beiden Divs, schweben Sie einfach den dritten nach links oder rechts.

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

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

schweben sie alle links

Stellen Sie sicher, dass eine Breite angegeben ist, die alle in ihren Container passen (entweder ein anderes div oder das Fenster), da sie sonst umbrochen werden

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

Dieser Code, den jemand dort oben gepostet hat, hat es geschafft !!! Wenn ich es kurz vor dem Schließen des Container-DIV einfüge, wird verhindert, dass sich alle nachfolgenden DIVs mit den DIVs überschneiden, die ich oben nebeneinander erstellt habe!

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

Tadaa !! :) :)

Schweben Sie alle drei Divs nach links. Wie hier:

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

Normalerweise schwebe ich nur den ersten nach links, den zweiten nach rechts. Der dritte richtet sich dann automatisch zwischen ihnen aus.

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

Der Vorteil dieser Methode ist, dass Sie jede Spaltenbreite unabhängig von der anderen festlegen können, solange Sie sie unter 100% halten. Wenn Sie 3 x 30% verwenden, werden die verbleibenden 10% als 5% -Teiler zwischen den Spalten aufgeteilt

Sie können schweben: links für alle und die Breite auf 33,333% einstellen

Versuchen Sie, dem Stil "display: block" hinzuzufügen

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


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

Ich habe die Bootstrap-Antwort nicht gesehen, also für das, was es wert ist:

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

Lassen Sie Bootstrap die Prozentsätze herausfinden. Ich möchte beide löschen, nur für den Fall.

Ich bevorzuge diese Methode, Floats werden in älteren Versionen von IE schlecht unterstützt (wirklich? ...)

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

AKTUALISIERT: Um diese Technik zu verwenden und aufgrund der absoluten Positionierung, müssen Sie natürlich die Divs in einen Container einschließen und eine Nachbearbeitung durchführen, um die Höhe von if zu definieren.

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

Nicht das Erstaunlichste auf der Welt, aber zumindest bei älteren IEs nicht kaputt.

Aber funktioniert es in Chrome?

Schweben Sie jedes Div und setzen Sie es frei, beide für die Reihe. Sie müssen keine Breiten einstellen, wenn Sie dies nicht möchten. Funktioniert in Chrome 41, Firefox 37, IE 11

Klicken Sie für 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;

}

So habe ich es geschafft, in einem <footer>Element etwas Ähnliches zu tun :

<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 diese Methode ist gut, aber Sie müssen allen schwebenden Divs Breite hinzufügen. Ich würde sagen, machen Sie sie gleich breit oder weisen Sie eine feste Breite zu. Etwas wie

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

Sie können jedem Div Klassennamen zuweisen, anstatt sie hinzuzufügen inline style , was keine gute Vorgehensweise ist.

Stellen Sie sicher, dass Sie ein Clearfix-Div oder ein Clear-Div verwenden, um zu vermeiden, dass der folgende Inhalt unter diesen Divs bleibt.

Details zur Verwendung von clearfix div finden Sie hier