Wie schwebe ich 3 Divs mit CSS nebeneinander?

270

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?

Dameon
quelle
3
Nicht genug Information. Wie breit sind die Schichten?
Josh Stodola
8
Ich würde display: inline-blockdiese Jungs lieber als sie schweben lassen. Wenn ihre Breite insgesamt kleiner als die Behälterbreite ist, sitzen sie nebeneinander.
Adam Waite
Ich empfehle die Verwendung von "display: table". Es ist die wartbarste und zuverlässigste Lösung. siehe stackoverflow.com/questions/14070787/…
John Henckel

Antworten:

300

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>
Nick Craver
quelle
6
Was ist, wenn Sie möchten, dass alle beim Erweitern der Seite erweitert werden?
CodyBugstein
31
@imray verwenden Sie nur% anstelle von px
TehTris
9
Könnten Sie näher erläutern, warum Sie <br style="clear: left;" />diesen Stil besonders verwenden sollten?
Mike de Klerk
2
@MikedeKlerk Es ist ein Clearfix, um zu vermeiden, dass das übergeordnete Element zusammenbricht.
Angel Politis
Wie @Nick Craver erklärte, sollten Sie allen Ihren Elementen die Eigenschaft float: left geben . Dies geschieht, weil die Eigenschaft float angibt, wie das Element links oder rechts vom übergeordneten Container platziert wird .
Nesha Zoric
130

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>

Aufkleber
quelle
52

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>
Sarfraz
quelle
3
Aber DIV ist ein Element auf Blockebene, oder? Wie kommt es dann, dass sie nebeneinander und nicht in den nächsten Zeilen platziert werden (da Elemente auf Blockebene mit einem Zeilenumbruch beginnen und enden). Hat Float auch einen anderen Einfluss darauf?
Ashwin
26

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

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

Migisha
quelle
16

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;
}
Arwen
quelle
6
Der Punkt ist, dass meine Antwort die richtigste ist und wenn eine neue Person diese Frage im Internet sucht, wird sie auf meine Antwort stoßen, die für sie am hilfreichsten wäre.
Arwen
2
Das könnte sein. Aber es fehlt jede Erklärung. Auf dieser Site ist es in Ordnung, andere Antworten zu kopieren und mehrere Teilantworten zu einer kombinierten besseren Antwort zusammenzuführen. Sie können Ihre bearbeiten und vervollständigen. Neue Benutzer haben jedoch einige Einschränkungen (Upvoting, wenige Links), daher würde ich dennoch empfehlen, sich nicht auf alte und beantwortete Fragen zu konzentrieren.
cfi
@cfi danke, ich werde es für zukünftige Referenz behalten.
Arwen
10

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>
Nick Travers
quelle
5
Verursacht das nicht Probleme, wenn die Größe des Browsers geändert wird?
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>

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

SugaComa
quelle
7

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

Daniel A. White
quelle
7

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>
Ann
quelle
6

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.

John Grabauskas
quelle
1
In Bootstrap 4 muss man das Ganze in ein Div mit der Zeilenklasse einschließen.
John Grabauskas
5

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.

jpbourbon
quelle
Um
jQuery (Dokument) .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.
Jpbourbon
4

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;

}
AndrewD
quelle
3

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 Maccaferri
quelle
2

@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

aquaaarian
quelle