452 Stimmen

serg avatar

Wie kann man 3 Divs (links/mittig/rechts) innerhalb eines anderen Divs ausrichten?

Gefragt el 8 de April, 2010
Wann wurde die Frage gestellt
975642 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ich möchte 3 Divs innerhalb eines Container-Div ausgerichtet haben, etwa 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 legte ich los:

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

Gefragt el 8 de April, 2010 von serg

Antworten

Zu viele Anzeigen?

399voto

dkamins avatar
dkamins Punkte 20856

Mit diesem CSS, setzen Sie Ihre divs wie folgt (Floats zuerst):

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

P.S. Sie können auch nach rechts, dann nach links und dann in die Mitte schweben. Wichtig ist, dass die Schwimmer vor dem "Haupt"-Mittelteil kommen.

P.P.S. Sie wollen oft das Letzte aus sich herausholen #container dieser Ausschnitt: <div style="clear:both;"></div> die die #container vertikal, um beide Seitenschwimmer zu enthalten, anstatt die Höhe nur von #center und möglicherweise die Seiten aus dem Boden herausragen zu lassen.

Beantwortet el 8 de April, 2010 von dkamins (20856 Punkte )

180voto

Michael Benjamin avatar
Michael Benjamin Punkte 302119

Horizontale Ausrichtung von drei Divs mit Flexbox

Hier ist eine CSS3-Methode zur horizontalen Ausrichtung 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>

jsFiddle

Le site justify-content Eigenschaft 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 der gleichen Zeile. Für eine Beschreibung der einzelnen Werte siehe: https://stackoverflow.com/a/33856609/3597276

Vorteile von Flexbox:

  1. minimaler Code; sehr effizient
  2. die Zentrierung, sowohl vertikal als auch horizontal, ist einfach und leicht
  3. gleich hohe Säulen sind einfach und leicht
  4. mehrere Optionen für die Ausrichtung von Flex-Elementen
  5. es ist reaktionsschnell
  6. im Gegensatz zu Schwimmern und Tischen, die nur eine begrenzte Layout-Kapazität bieten, da sie nie für die Erstellung von Layouts gedacht waren, ist flexbox eine moderne (CSS3) Technik mit einer breiten Palette von Optionen.

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

Browser-Unterstützung: _Flexbox wird von allen wichtigen Browsern unterstützt, außer IE < 10 . Einige neuere Browser-Versionen, wie Safari 8 und IE10, erfordern Lieferantenpräfixe . Für eine schnelle Möglichkeit, Präfixe hinzuzufügen, verwenden Sie Autoprefixer . Mehr Details unter diese Antwort ._

Beantwortet el 20 de August, 2015 von Michael Benjamin (302119 Punkte )

141voto

fruechtemuesli avatar
fruechtemuesli Punkte 2819

Wenn Sie Ihre HTML-Struktur nicht ändern wollen, können Sie auch durch Hinzufügen von text-align: center; an das Wrapper-Element und ein display: inline-block; auf das zentrierte Element.

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

Beantwortet el 11 de Januar, 2013 von fruechtemuesli (2819 Punkte )

23voto

Rajiv Pingale avatar
Rajiv Pingale Punkte 995

Die Eigenschaft Float wird eigentlich nicht zur Ausrichtung des Textes verwendet.

Diese Eigenschaft wird verwendet, um ein Element entweder rechts, links oder in der Mitte einzufü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>

für float:left wird die Ausgabe [First][second][Third]

für float:right wird die Ausgabe [Third][Second][First]

Das heißt, die Eigenschaft float => left fügt das nächste Element links vom vorherigen Element ein, dasselbe gilt für 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 eingefü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>

[Erste] [Zweite]

[Dritter]

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

Beantwortet el 12 de November, 2011 von Rajiv Pingale (995 Punkte )

16voto

Santosh Khalse avatar
Santosh Khalse Punkte 10598

Es gibt verschiedene Tricks, um die Elemente auszurichten.

01. Tischtrick verwenden

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

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

02. Flex-Trick verwenden

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

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

03. Schwebetrick verwenden

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
Beantwortet el 24 de Januar, 2017 von Santosh Khalse (10598 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X