CSS - div'leri yatay olarak hizalayın

Sabit widthve ile bir kapsayıcı div heightvar overflow: hidden.

Bu kapsayıcı içinde yatay bir float: left div sırası istiyorum. Sola kayan div'ler, ebeveynlerinin sağ sınırını okuduktan sonra doğal olarak aşağıdaki 'çizgiye' itecektir. heightEbeveynin buna izin vermemesi gerekse bile bu gerçekleşecektir. Bu şu şekilde görünüyor:

! [Yanlış] [1] - bir reklamla değiştirilmiş olan resim kulübesi resmi kaldırıldı

Nasıl görünmesini isterdim:

! [Sağ] [2] - bir reklamla değiştirilmiş olan resim kulübesi resmi kaldırıldı

Not: İstediğim efekt, satır içi öğeler kullanılarak elde edilebilir white-space: no-wrap(gösterilen resimde bunu böyle yaptım). Bununla birlikte, bu benim için iyi değil (burada açıklanamayacak kadar uzun nedenlerden dolayı), çünkü alt div öğelerinin yüzen blok seviyesi öğeleri olması gerekiyor.

Kapsayıcıya, tüm yüzen div'leri tutmaya yetecek genişlikte bir iç div koyabilirsiniz.

#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"ebeveyn için divve style="float: left"tüm çocuk için IE7 ve altı gibi eski tarayıcılar için hizalamayı yatay divsolarak yapmak önemlidir divs.

Modern tarayıcılar için, style="display: table-cell"tüm çocuk için kullanabilirsiniz divsve yatay olarak düzgün bir şekilde işlenir.

Bu, istediğiniz şeye yakın görünüyor:

#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özelliği kullanabilirsiniz :

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

İşe başlamak için position: absoluteve overflow: hiddengerekli olanları not edin clip.

Gerekirse div'leri yatay ve dikey olarak hizalamak için artık css flexbox'ı kullanabilirsiniz. genel formül böyle gider

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, kabın genişliğini aşmaları durumunda öğeleri yatay olarak hizalayamaz.

Öğelerin yatay olarak görüntülenmesi ZORUNLUysa, kabın sarmaması gerektiğini unutmamak önemlidir: white-space: nowrap

Sola sürün. id="container"LucaM'nin örneğinde, Chrome'da en azından bir sarmalayıcıya sahip olmanıza gerek yok .

Bunun gibi bir şey yapabilirsiniz:

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