CSS - выравнивание div по горизонтали

У меня есть контейнер div с фиксированным widthи height, с overflow: hidden.

Мне нужен горизонтальный ряд блоков float: left в этом контейнере. Div, которые перемещаются влево, естественным образом нажимают на «строку» ниже после того, как прочитают правую границу своего родителя. Это произойдет, даже если heightродительский элемент не должен этого допускать. Вот как это выглядит:

! [Wrong] [1] - удалено изображение лабиринта изображения, которое было заменено рекламой

Как бы я хотел, чтобы это выглядело:

! [Right] [2] - удаленное изображение лачуги изображения, которое было заменено рекламой

Примечание: желаемый эффект может быть достигнут с помощью встроенных элементов & white-space: no-wrap(именно так я сделал это на изображении). Однако для меня это нехорошо (по причинам, слишком длинным, чтобы объяснять здесь), поскольку дочерние блоки div должны быть плавающими элементами уровня блока.

Вы можете поместить в контейнер внутренний div, достаточно широкий, чтобы вместить все плавающие 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"для родителя 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к работе.

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

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

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

Важно отметить, что контейнер не должен оборачиваться, если элементы ДОЛЖНЫ отображаться горизонтально: white-space: nowrap

Оставьте их. По крайней мере, в 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>