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

Question

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

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

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

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

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

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

Answer 1

Вы можете поместить внутренний контейнер в контейнер, достаточно широкий, чтобы вместить все плавающие элементы.

#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="overflow:hidden" для родителя 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 не сможет выровнять элементы по горизонтали, если они превышают ширину контейнера.

Важно отметить, что контейнер не должен переноситься, если элементы ДОЛЖНЫ отображаться горизонтально: white-space: 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.