CSS - Alinha os divs horizontalmente

Eu tenho uma div contêiner com um fixo widthe height, com overflow: hidden.

Eu quero uma linha horizontal de float: divs à esquerda dentro deste contêiner. Divs que são flutuados para a esquerda irão naturalmente empurrar para a 'linha' abaixo após lerem o limite direito de seu pai. Isso acontecerá mesmo se heighto pai / mãe não permitir isso. É assim que parece:

! [Errado] [1] - imagem de barraca de imagem removida que foi substituída por um anúncio

Como eu gostaria que fosse:

! [Direita] [2] - imagem de shack removida que foi substituída por um anúncio

Nota: o efeito que desejo pode ser alcançado usando elementos embutidos & white-space: no-wrap(é assim que fiz na imagem mostrada). Isso, no entanto, não é bom para mim (por motivos muito extensos para explicar aqui), pois os divs filhos precisam ser elementos de nível de bloco flutuantes.

Você pode colocar um div interno no contêiner que seja largo o suficiente para conter todos os divs flutuantes.

#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"para os pais dive style="float: left"para todos os filhos, divsé importante divsalinhar horizontalmente para navegadores antigos como o IE7 e anteriores.

Para navegadores modernos, você pode usar style="display: table-cell"para todos os filhos divse seria renderizado horizontalmente de forma adequada.

Isso parece perto do que você deseja:

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

você pode usar a clippropriedade:

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

observe o position: absolutee overflow: hiddennecessário para começar clipa trabalhar.

Float: left, display: inline-block não conseguirá alinhar os elementos horizontalmente se eles excederem a largura do contêiner.

É importante observar que o contêiner não deve quebrar se os elementos DEVEM ser exibidos horizontalmente: white-space: nowrap

Agora você pode usar css flexbox para alinhar divs horizontalmente e verticalmente, se necessário. fórmula geral é assim

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

Flutue-os para a esquerda. No Chrome, pelo menos, você não precisa ter um wrapper id="container", no exemplo de LucaM.

Você pode fazer algo assim:

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