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

Sie können dies versuchen:

Ihr Html-Code sieht wie folgt aus:

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

und Ihren 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]]

Answer 2

Hier sind die Änderungen, die ich an der akzeptierten Antwort vornehmen musste, als ich dies mit einer Bild als zentrales Element:

1. Stellen Sie sicher, dass das Bild von einem div ( #center in diesem Fall). Wenn dies nicht der Fall ist, müssen Sie display a block und es scheint sich relativ zum Abstand zwischen den schwebenden Elementen zu zentrieren.

2. Stellen Sie sicher, dass Sie die Größe des Bildes et seinen Behälter:

   #center {
       margin: 0 auto;
   }
   
   #center, #center > img {
       width: 100px;
       height: auto;
   }

Answer 3

.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

Answer 4

Sie haben alles richtig gemacht, Sie müssen nur noch die Schwimmer entfernen. Fügen Sie einfach

overflow: auto; 

zu Ihrer Container-Klasse.

Answer 5

Die einfachste Lösung besteht darin, einen Tisch mit 3 Spalten zu erstellen und diesen in die Mitte zu stellen.

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