CSS-Make divs align horizontal

Mam kontener div o stałej szerokości i wysokości, z overflow: hidden.

Chcę poziomego wiersza float: left divs wewnątrz tego kontenera. Div, które są płynne po lewej stronie, naturalnie popchnie się na "linię" poniżej po odczytaniu prawej granicy ich rodzica. Stanie się tak, nawet jeśli wzrost rodzica nie powinien na to pozwolić. Tak to wygląda:

![Źle][1] - usunięto obrazek, który został zastąpiony przez ogłoszenie

Jak Ja chcialby wygladac:

![Prawo][2] - usunięto obrazek, który został zastąpiony przez ogłoszenie

Uwaga: pożądany efekt można osiągnąć za pomocą elementów inline & white-space: no-wrap (tak zrobiłem na pokazanym obrazku). To jednak nie jest dla mnie dobre (z powodów zbyt długich, aby wyjaśnić tutaj), jak div dziecka muszą być pływających elementów poziomu bloku.

Author: billy.farroll, 2008-09-01
Source

7 answers

Możesz umieścić wewnętrzny div w pojemniku, który jest wystarczająco szeroki, aby pomieścić wszystkie pływające div.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
 86
Author: LucaM,
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
2016-12-03 18:35:30

style="overflow:hidden" dla rodzica div i style="float: left" dla wszystkich dzieci {[3] } są ważne, aby divs wyrównać poziomo dla starych przeglądarek, takich jak IE7 i poniżej.

Dla nowoczesnych przeglądarek, można użyć style="display: table-cell" dla wszystkich potomków divs i renderować poprawnie poziomo.

 27
Author: Kwex,
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
2014-08-03 22:03:27

Możesz użyć właściwości clip: 

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

Zwróć uwagę na position: absolute i overflow: hidden potrzebne do pracy clip.

 4
Author: fcurella,
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
2016-01-14 19:15:01

To wydaje się zbliżone do tego, czego chcesz: 

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}
<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
 4
Author: Sören Kuklau,
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
2016-12-03 18:36:33

Float: left, display: inline-block nie wyrównuje elementów w poziomie, jeśli przekroczą szerokość kontenera.

Należy pamiętać, że pojemnik nie powinien się zawijać, jeśli elementy muszą być wyświetlane poziomo: white-space: nowrap

 2
Author: William 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
2015-08-28 17:57:15

Możesz teraz użyć css flexbox, aby wyrównać divs poziomo i pionowo, jeśli potrzebujesz. ogólna formuła wygląda tak 

parent-div {
   display:flex;
   flex-wrap: wrap;
   justify-content: center ; /* for horizontal aligning of child divs */
   align-items : center ; /* for vertical aligning */
   }
child-div {
  width: /* yoursize for each div */ ; 
 }
 2
Author: sriram hegde,
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
2016-07-17 10:58:04

/ Align = "left" / W Chrome przynajmniej nie musisz mieć wrappera, id="container", w przykładzie Lucama.

 1
Author: Wolfpack'08,
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
2012-07-30 07:57:55