Jak wyrównać 3 divs (left/center/right) wewnątrz innego div?

Chcę mieć 3 divy wyrównane wewnątrz kontenera div, coś w tym stylu: 

[[LEFT]       [CENTER]        [RIGHT]]

Kontener div ma 100% szerokości (brak ustawionej szerokości), a środkowy div powinien pozostać w środku po zmianie rozmiaru kontenera.

Więc ustawiłem: 

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

Ale staje się: 

[[LEFT]       [CENTER]              ]
                              [RIGHT]
Jakieś wskazówki?
Author: Michael_B, 0000-00-00
Source

5 answers

Z tym CSS, umieść swoje divy w ten sposób (floats pierwszy): 

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

P. S. Możesz także unosić się w prawo, potem w lewo, potem w środek. Ważne jest to, że pływaki są przed" główną " sekcją środkową.

P. P. S. często chcesz, aby ostatni w środku #container Ten fragment: <div style="clear:both;"></div>, który będzie rozciągał się #container pionowo, aby zawierał obie boczne pływaki, zamiast brać jego wysokość tylko z #center i ewentualnie pozwalać bokom wystawać na dno.

 324
Author: dkamins,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-13 04:23:30

Jeśli nie chcesz zmieniać swojej struktury HTML, możesz również dodać {[1] } do elementu wrappera i display: inline-block; do elementu wyśrodkowanego.

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

 112
Author: fruechtemuesli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-11 00:52:29

Wyrównanie Trzech Div Poziomo Za Pomocą Flexbox

Oto metoda CSS3 do wyrównywania divów poziomo wewnątrz innego div.

#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

Właściwość justify-content przyjmuje pięć wartości:

  • flex-start (domyślnie)
  • flex-end
  • center
  • space-between
  • space-around

We wszystkich przypadkach, trzy div są w tej samej linii. Opis każdej wartości znajduje się w: https://stackoverflow.com/a/33856609/3597276

zalety flexbox:

  1. minimalny kod; bardzo wydajny
  2. centrowanie, zarówno w pionie, jak i w poziomie, jest proste i łatwe
  3. kolumny o równej wysokości są proste i łatwe
  4. wiele opcji wyrównywania elementów flex
  5. reaguje
  6. w przeciwieństwie do pływaków i tabel, które oferują ograniczoną pojemność układu, ponieważ nigdy nie były przeznaczone do budowy układów, flexbox to nowoczesna (CSS3) technika z szerokim wachlarzem opcji.

aby dowiedzieć się więcej o flexbox odwiedź stronę:

przeglądarka wsparcie: Flexbox jest obsługiwany przez wszystkie główne przeglądarki, z wyjątkiem IE . Safari 8 i IE10 wymagają prefiksów dostawcy . Aby szybko dodać prefiksy użyj Autoprefixer. Więcej szczegółów w ta odpowiedź .

 88
Author: Michael_B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:28

Właściwość Float nie jest używana do wyrównania tekstu.

Ta właściwość służy do dodania elementu do prawej, lewej lub środkowej strony. 

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>

Dla float:left Wyjście będzie [First][second][Third]

Dla float:right Wyjście będzie [Third][Second][First]

To oznacza, że float = > left właściwość doda twój następny element do lewej od poprzedniego, ten sam przypadek z prawej

Należy również wziąć pod uwagę szerokość elementu nadrzędnego, jeśli suma szerokości elementów podrzędnych przekracza Szerokość elementu nadrzędnego, wtedy następny element zostanie dodany w następnej linii 

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

[Pierwszy] [Drugi]

[trzeci]

Więc musisz wziąć pod uwagę wszystkie te aspekty, aby uzyskać doskonały wynik]}
 19
Author: Rajiv Pingale,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-27 14:15:31

Lubię swoje pręty mocno i dynamicznie. To jest dla CSS 3 & HTML 5

     12
    Author: ,
    Warning: date() expects parameter 2 to be long, string given in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54