CSS - wyrównaj elementy DIV w poziomie

Mam kontener div ze stałym widthi height, z overflow: hidden.

Chcę, aby w tym kontenerze znajdował się poziomy rząd zmiennej typu float: left divs. Elementy Div, które są pływające po lewej stronie, w naturalny sposób przechodzą do „wiersza” poniżej po przeczytaniu prawej krawędzi ich elementu nadrzędnego. Stanie się tak nawet wtedy, heightgdy rodzic nie powinien na to pozwolić. Oto jak to wygląda:

! [Wrong] [1] - usunięto obraz szopki, który został zastąpiony reklamą

Jak chciałbym to wyglądać:

! [Right] [2] - usunięto obraz szopki, który został zastąpiony reklamą

Uwaga: pożądany efekt można osiągnąć za pomocą elementów inline & white-space: no-wrap(tak to zrobiłem na pokazanym obrazku). Nie jest to jednak dla mnie dobre (z powodów zbyt długich, by tu wyjaśnić), ponieważ podrzędne elementy div muszą być pływającymi elementami blokowymi.

Możesz umieścić wewnętrzny element DIV w pojemniku, który jest wystarczająco szeroki, aby pomieścić wszystkie pływające elementy 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>

style="overflow:hidden"dla rodziców divi style="float: left"dla wszystkich dzieci divssą ważne, aby divswyrównać poziomo w starszych przeglądarkach, takich jak IE7 i starsze.

W przypadku nowoczesnych przeglądarek można użyć style="display: table-cell"dla całego dziecka divsi renderowałoby się prawidłowo w poziomie.

To wydaje się bliskie temu, 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>

możesz korzystać z clipnieruchomości:

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

zanotuj position: absolutei overflow: hiddenpotrzebne, aby dostać się clipdo pracy.

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

Należy pamiętać, że pojemnik nie powinien być zawijany, jeśli elementy MUSZĄ być wyświetlane poziomo: white-space: nowrap

Możesz teraz używać css flexbox do wyrównywania elementów div w poziomie i w pionie, jeśli zajdzie taka potrzeba. ogólna formuła wygląda następująco

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}

Wypuść je w lewo. Przynajmniej w Chrome nie musisz mieć opakowania id="container", jak w przykładzie LucaM.

Możesz zrobić coś takiego:

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

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>