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

Question

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?

Answer 1

Ich mag es, wenn meine Stäbe straff und dynamisch sind. Dies ist für CSS 3 & HTML 5

1. Erstens ist die Einstellung der Breite auf 100px einschränkend. Tun Sie es nicht.

2. Zweitens, die Einstellung der Breite des Containers auf 100 % wird ok, bis es über eine Kopfzeile / Fußzeile für die gesamte App, wie eine Navigation oder Credits / Copyright Bar sprechen. verwenden right: 0; stattdessen für dieses Szenario.

3. Sie verwenden id's (Hash #container , #left , usw.) anstelle von Klassen ( .container , .left , usw.), was in Ordnung ist, es sei denn, Sie wollen Ihr Stilmuster an anderer Stelle in Ihrem Code wiederholen. Ich würde stattdessen die Verwendung von Klassen in Betracht ziehen.

4. Bei HTML ist es nicht nötig, die Reihenfolge zu vertauschen: links, Mitte und rechts. display: inline-block; behebt dies und macht Ihren Code wieder sauberer und logisch geordnet.

5. Schließlich müssen Sie die Schwimmer alle aufräumen, damit sie nicht mit zukünftigen <div> . Sie tun dies mit der clear: both;

Zusammengefasst:

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

Answer 2

Dies kann leicht mit der CSS3 Flexbox gemacht werden, eine Funktion, die in der Zukunft verwendet werden wird (Wenn <IE9 ist völlig tot) bei fast allen Browsern.

Prüfen Sie die Browser-Kompatibilitä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:

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

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

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

Answer 3

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>

Answer 4

Ein CSS-Raster kann diese Aufgabe leicht erledigen:

#container {
  display: grid;                   /* (1) a grid container */
  grid-auto-flow:column;           /* (2) column layout    */
  justify-content: space-between;  /* (3) align the columns*/
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 5

Mögliche Antwort, wenn Sie die Reihenfolge der HTML-Dateien beibehalten und keine 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