CSS - Зробити вирівнювання divs горизонтально

У мене є контейнер div з фіксованим widthта height, з overflow: hidden.

Я хочу горизонтальний рядок float: left divs у цьому контейнері. Діви, які плавають ліворуч, природно натискаються на "лінію" нижче, після того, як прочитають праву межу свого батька. Це трапиться, навіть якщо heightбатьки не повинні цього дозволити. Ось як це виглядає:

! [Неправильно] [1] - вилучене зображення халупи, яке було замінено рекламою

Як би я хотів, щоб це виглядало:

! [Вправо] [2] - вилучене зображення халупи, яке було замінено рекламою

Примітка: бажаного ефекту можна досягти за допомогою вбудованих елементів & white-space: no-wrap(саме так я зробив це на зображеному зображенні). Однак це не годиться для мене (із занадто довгих для пояснення причин), оскільки дочірні divs повинні мати плаваючі елементи рівня блоку.

Ви можете помістити внутрішній div у контейнер, який є досить широким, щоб вмістити всі плаваючі divs.

#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"для батьків divта style="float: left"для всієї дитини divsважливо зробити divsгоризонтальне вирівнювання для старих браузерів, таких як IE7 і нижче.

Для сучасних браузерів ви можете використовувати style="display: table-cell"для всієї дитини, divsі вона відображатиметься горизонтально належним чином.

Це здається близьким до того, що ви хочете:

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

Ви можете використовувати clipвластивість:

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

зверніть увагу на position: absoluteі overflow: hiddenнеобхідне для того, щоб приступити clipдо роботи.

Float: left, display: inline-block обидва не зможуть вирівняти елементи горизонтально, якщо вони перевищують ширину контейнера.

Важливо зазначити, що контейнер не повинен обгортатися, якщо елементи ПОВИННІ відображатись горизонтально: white-space: nowrap

Тепер ви можете використовувати css flexbox для вирівнювання divs по горизонталі та вертикалі, якщо вам потрібно. загальна формула виглядає так

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

Попливіть їх ліворуч. У Chrome, принаймні, вам не потрібно мати обгортку id="container", на прикладі LucaM.

Ви можете зробити щось подібне:

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