CSS - Сделать divs выравниванием по горизонтали

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

Я хочу горизонтальный ряд с плавающей точкой: оставил div внутри этого контейнера. Div, которые плавают влево, будут естественно выдвигаться на "строку" ниже после того, как они прочитают правую границу своего родителя. Это произойдет, даже если height родителя не допустит этого. Вот как это выглядит:

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

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

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

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

Ответ 1

Вы можете поместить внутренний 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>

Ответ 2

style="overflow:hidden" для родительских div и style="float: left" для всех дочерних divs важно сделать выравнивание divs горизонтальным для старых браузеров, таких как IE7 и ниже.

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

Ответ 3

Это похоже на то, что вы хотите:

#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

вы можете использовать свойство clip:

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

обратите внимание на position: absolute и overflow: hidden, необходимые для работы clip.

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Поплавьте их влево. В Chrome, по крайней мере, вам не нужно иметь обертку, id="container", в примере LucaM.