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

Question

У меня есть контейнер div с фиксированной шириной и высотой, с переполнением:скрытый.

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

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

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

![Правильно][2] - удалено изображение shack, которое было заменено рекламой

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Это кажется близким к тому, что вы хотите:

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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