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

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

JSFiddle-Demo

Answer 2

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

HTML

<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>

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 sehen unter JSFiddle

Answer 3

使用方法 CSS-Raster

layout {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
start-column {
    justify-self: start;
}
center-column {
    justify-self: center;
}
end-column {
    justify-self: end;
}

<layout>
    <start-column>
        <button>Start</button>
    </start-column>
    <center-column>
        <p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p>
    </center-column>
    <end-column>
        <a href="#">End</a>
    </end-column>
</layout>

Answer 4

Wenn die linken, mittleren und rechten DIVs unterschiedliche Breiten haben, können Sie dies wie folgt erreichen:

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

  #left {
    position: absolute;
    left: 0px;
  }

  #right {
    position: absolute;
    right: 0px;
  }

  #center {
    display: inline-block;
  }

Wenn Ihr zentrales DIV aus Text besteht, brauchen Sie die #center CSS.

Answer 5

使用方法 Bootstrap 3 Ich erstelle 3 Divs mit gleicher Breite (in einem 12-Spalten-Layout 4 Spalten für jedes Div). Auf diese Weise können Sie Ihre zentrale Zone zentriert halten, auch wenn die linken/rechten Abschnitte unterschiedliche Breiten haben (wenn sie den Platz ihrer Spalten nicht überfüllen).

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