Wie richte ich 3 Divs (links / Mitte / rechts) in einem anderen Div aus?

392

Ich möchte 3 Divs in einem Container-Div ausrichten lassen, ungefähr so:

[[LEFT]       [CENTER]        [RIGHT]]

Das Container-Div ist 100% breit (keine festgelegte Breite), und das mittlere Div sollte nach der Größenänderung des Containers in der Mitte bleiben.

Also habe ich gesetzt:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Aber es wird:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Irgendwelche Tipps?

html  css  flexbox  alignment  css-float 
— serg
quelle
1
Wenn der Container schmaler als 300 Pixel wird, geschieht dies, sofern Sie nicht die Überlaufeigenschaft festlegen.
— inkedmn
Flexbox und auch Grid: jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar
Nur zur Kenntnisnahme - Gemäß dem Kommentar von @ inkedmn konnte ich mit einer Reihe von Inhalten in jeder Spalte nicht alle dazu bringen, bei jeder Containerbreite ohne overflow: hidden;die centerSpalte richtig ausgerichtet zu werden . Bei der Medienabfrage für kleine Geräte, bei der alle drei Spalten auf der Seite übereinander overflow: hidden;zentriert waren , musste ich die mittlere Zeile (bei großen Geräten die rechte Spalte) verwenden, da sie sonst keine Höhe hatte und nicht vertikal zentriert war zwischen der oberen und unteren Reihe.
— Chris L

Antworten:

364

Setzen Sie mit diesem CSS Ihre Divs so (schwebt zuerst):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS Sie können auch nach rechts, dann nach links und dann in der Mitte schweben. Wichtig ist, dass die Schwimmer vor dem Hauptteil "Haupt" stehen.

PPS Sie möchten oft das Letzte in #containerdiesem Snippet, <div style="clear:both;"></div>das sich #containervertikal erstreckt , um beide Seitenschwimmer aufzunehmen, anstatt seine Höhe nur von dort zu nehmen #centerund möglicherweise zuzulassen, dass die Seiten aus dem Boden herausragen.

— Dkamins
quelle
Wie würden Sie es tun, wenn der Container nicht 100% wäre? Ich versuche so etwas hier, ich möchte, dass der Div rechts vom Container bleibt, aber er schwebt rechts von der Seite
— Tiago
@Tiago: Die Floats sollten auf das Div beschränkt bleiben, wenn sie sich darin befinden. Überprüfen Sie die Breite des Containers, indem Sie ihn auf einstellen border:solid. Wenn es 100% ist, schließen Sie es in ein anderes div ein, um es innerhalb Ihrer Seite zu positionieren.
— James P.
Außerdem - Wenn Sie diese in einen anpassbaren Container legen, stellen Sie sicher, dass Sie eine Mindestbreite des Containers festlegen, damit das rechts schwebende Div nicht nach unten gedrückt wird.
— Tapefreak
6
Diese Antwort ist mehr als sechs Jahre alt. 2016 lautet die richtige Antwort flexbox.
1
@torazaburo, vielleicht gibt es mehr als eine richtige Antwort, es gibt viele Möglichkeiten, um den gleichen Punkt zu erreichen. In diesem Fall muss ich diese Lösung verwenden, da ein Framework, das ich verwende, bereits links und rechts mit float auf Elemente setzt Das Hinzufügen eines Mittelelements am Ende ist perfekt für mich.
— Ninja Coding
128

Wenn Sie Ihre HTML-Struktur nicht ändern möchten, können Sie dies auch durch Hinzufügen text-align: center;zum Wrapper-Element und a display: inline-block;zum zentrierten Element tun .

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Live-Demo: http://jsfiddle.net/CH9K8/

— fruechtemuesli
quelle
1
Dies ist die einzige Lösung, deren Größe sich an die Fensterbreite anpasst, ohne zu früh zu falten.
— Jared Sealey
2
Es ist perfekt, wenn die Größen links und rechts gleich sind. Andernfalls ist das Zentrum nicht zentriert.
— Mortalis
127

Horizontale Ausrichtung von drei Divs mithilfe von Flexbox

Hier ist eine CSS3-Methode zum horizontalen Ausrichten von Divs innerhalb eines anderen Divs.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Erweitern Sie das Snippet

jsFiddle

Die justify-contentEigenschaft nimmt fünf Werte an:

  • flex-start (Standard)
  • flex-end
  • center
  • space-between
  • space-around

In allen Fällen befinden sich die drei Divs in derselben Zeile. Eine Beschreibung der einzelnen Werte finden Sie unter: https://stackoverflow.com/a/33856609/3597276

Vorteile der Flexbox:

  1. minimaler Code; sehr effizient
  2. Das vertikale und horizontale Zentrieren ist einfach und leicht
  3. Säulen gleicher Höhe sind einfach und leicht
  4. Mehrere Optionen zum Ausrichten von Flexelementen
  5. es reagiert
  6. Im Gegensatz zu Floats und Tischen, die eine begrenzte Layoutkapazität bieten, da sie nie zum Erstellen von Layouts vorgesehen waren, ist Flexbox eine moderne (CSS3) Technik mit einer breiten Palette von Optionen.

Um mehr über die Flexbox zu erfahren, besuchen Sie:

Browserunterstützung: Flexbox wird von allen gängigen Browsern außer IE <10 unterstützt . Einige neuere Browserversionen wie Safari 8 und IE10 erfordern Herstellerpräfixe . Verwenden Sie Autoprefixer , um schnell Präfixe hinzuzufügen . Weitere Details in dieser Antwort .

— Michael Benjamin
quelle
7
Flex ist viel besser als die Verwendung von Schwimmern.
— Faizan Akram Dar
1
Tolle Erklärung hier und in den verlinkten Beiträgen! Ein Nebenbemerkung: Die Verwendung von "span" -Elementen als Flex-Elemente innerhalb des Container-Divs funktionierte in Firefox, jedoch nicht in einem Javafx-basierten Browser (Webview). Das Ändern der "Bereiche" in "Divs" funktionierte in beiden Fällen.
— Ashok
Internet Explorer 10 und frühere Versionen unterstützen die Eigenschaft "Inhalt rechtfertigen" nicht
— D.Snap
1
Dies funktioniert leider nur bei gleich breiten Artikeln. Siehe auch stackoverflow.com/questions/32551291/…
— Handle
Ausgezeichnet, ich habe hier alle Lösungen ausprobiert und dies ist die beste!
— Nico Müller
22

Die Float-Eigenschaft wird tatsächlich nicht zum Ausrichten des Texts verwendet.

Diese Eigenschaft wird verwendet, um ein Element entweder rechts oder links oder in der Mitte hinzuzufügen. 

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>
Erweitern Sie das Snippet

für die float:leftAusgabe wird sein[First][second][Third]

für die float:rightAusgabe wird sein[Third][Second][First]

Das bedeutet, dass die Eigenschaft float => left Ihr nächstes Element links vom vorherigen Element hinzufügt. Gleicher Fall mit right

Außerdem müssen Sie die Breite des übergeordneten Elements berücksichtigen. Wenn die Summe der Breiten der untergeordneten Elemente die Breite des übergeordneten Elements überschreitet, wird das nächste Element in der nächsten Zeile hinzugefügt

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>
Erweitern Sie das Snippet

[Erste Sekunde]

[Dritte]

Sie müssen also all diese Aspekte berücksichtigen, um das perfekte Ergebnis zu erzielen

— Rajiv Pingale
quelle
13

Ich mag meine Bars eng und dynamisch. Dies ist für CSS 3 und HTML 5

  1. Erstens ist das Einstellen der Breite auf 100 Pixel einschränkend. Tu es nicht.

  2. Zweitens funktioniert das Einstellen der Containerbreite auf 100% in Ordnung, bis davon die Rede ist, dass es sich um eine Kopf- / Fußzeilenleiste für die gesamte App handelt, z. B. eine Navigations- oder Credits- / Copyright-Leiste. Verwenden Sie right: 0;stattdessen für dieses Szenario.

  3. Sie verwenden die id (Hash #container, #leftetc.) anstelle von Klassen ( .container, .leftusw.), was in Ordnung ist, wenn Sie Ihre Stil - Muster in Ihrem Code an anderer Stelle wiederholen mögen. Ich würde stattdessen Klassen verwenden.

  4. Bei HTML muss die Reihenfolge nicht ausgetauscht werden für: left, center & right. display: inline-block;behebt dieses Problem, indem Ihr Code wieder sauberer und logisch in Ordnung gebracht wird.

  5. Zuletzt müssen Sie die Schwimmer aufräumen, damit sie nicht mit der Zukunft in Konflikt geraten <div>. Du machst das mit demclear: both;

Zusammenfassen:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Bonuspunkt bei Verwendung von HAML und SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
— Eric Wanchic
quelle
12

Zum Ausrichten der Elemente stehen verschiedene Tricks zur Verfügung.

01. Tischtrick verwenden

Code-Snippet anzeigen

02. Flex Trick verwenden

Code-Snippet anzeigen

03. Float Trick verwenden

Code-Snippet anzeigen

— Santosh Khalse
quelle
11

Dies kann einfach mit der CSS3 Flexbox durchgeführt werden, eine Funktion, die in Zukunft (wenn sie <IE9vollständig tot ist) von fast jedem Browser verwendet wird.

Überprüfen Sie die Browserkompatibilitätstabelle

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Ausgabe:

Code-Snippet anzeigen

— Manoj Kumar
quelle
4

Mit Twitter Bootstrap: 

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
— Ka.
quelle
3

mögliche Antwort, wenn Sie die Reihenfolge des HTML beibehalten und nicht flex verwenden möchten.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Code Pen Link

— Pruthvi P.
quelle
2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; ergibt eine perfekte Ausrichtung in der Mitte.

JSFiddle Demo

— Khalid Farhan
quelle
Es zentriert nur das div in Ihrem Beispiel, weil die Textelemente fast die gleiche Größe haben, einen Text länger machen und das #center div nicht mehr in der Mitte ist: jsfiddle.net/3a4Lx239
— Kai Noack
1

Ich habe einen weiteren Versuch unternommen, dies zu vereinfachen und ohne die Notwendigkeit eines Containers zu erreichen.

HTML 

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Sie können es live bei JSFiddle sehen

— user15100
quelle
1

Mit Bootstrap 3 erstelle ich 3 Divs gleicher Breite (im 12-Spalten-Layout 4 Spalten für jedes Div). Auf diese Weise können Sie Ihre zentrale Zone auch dann zentriert halten, wenn die linken / rechten Abschnitte unterschiedliche Breiten haben (wenn sie den Spaltenraum nicht überlaufen).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Um diese Struktur ohne Bibliotheken zu erstellen, habe ich einige Regeln aus Bootstrap CSS kopiert.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

— mortalis
quelle
0

Hier sind die Änderungen, die ich an der akzeptierten Antwort vornehmen musste, als ich dies mit einem Bild als zentralem Element tat :

  1. Stellen Sie sicher, dass das Bild in einem div eingeschlossen ist ( #centerin diesem Fall). Wenn dies nicht der Fall, werden Sie setzen müssen , displayzu block, und es scheint zu Mitte in Bezug auf den Raum zwischen dem Floats.

  2. Stellen Sie sicher, dass Sie die Größe des Bildes und seines Containers festlegen :

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— Sam
quelle
0

Sie können dies versuchen:

Ihr HTML-Code lautet wie folgt:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

und dein CSS-Code wie folgt:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Die Ausgabe sollte also folgendermaßen aussehen:

[[LEFT]       [CENTER]        [RIGHT]]
— Kishan Radadiya
quelle
-1 
.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess
— Shubham
quelle
2
Willkommen bei Stack Overflow! Bitte fügen Sie eine Erklärung hinzu, warum dieser Code dem OP hilft. Dies wird dazu beitragen, eine Antwort zu geben, von der zukünftige Zuschauer lernen können. Siehe Wie Antwort für weitere Informationen.
— Heretic Monkey
-3

Sie haben es richtig gemacht, Sie müssen nur Ihre Schwimmer löschen. Einfach hinzufügen 

overflow: auto;

zu Ihrer Containerklasse.

— Mustapha ZEGAOULA
quelle
-6

Die einfachste Lösung besteht darin, eine Tabelle mit 3 Spalten zu erstellen und diese Tabelle zu zentrieren.

html:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

CSS:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}
— Sthembiso F. Makhathini
quelle
-10 
#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
— Bytes
quelle
2
Erklären Sie bitte , warum dieser Code das aufgeworfene Problem löst , anstatt nur einen Codeblock zu veröffentlichen . Ohne eine Erklärung ist dies keine Antwort.
— Martijn Pieters
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.