CSS - Alinhar divs horizontalmente

Question

Eu tenho um contêiner div com largura e altura fixas, com overflow:escondido.

Quero uma linha horizontal de float:deixou divs dentro deste contêiner.Divs que flutuam para a esquerda irão naturalmente para a 'linha' abaixo depois de lerem o limite direito de seu pai.Isso acontecerá mesmo que a altura dos pais não permita isso.É assim que parece:

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

Como eu gostaria que fosse:

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

Observação:o efeito que desejo pode ser alcançado usando elementos embutidos e espaços em branco:no-wrap (foi assim que fiz na imagem mostrada).Isso, no entanto, não é bom para mim (por razões muito demoradas para explicar aqui), já que os divs filhos precisam ser elementos flutuantes em nível de bloco.

Answer 1

Você pode colocar uma div interna no contêiner que seja larga o suficiente para conter todas as 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>

Answer 2

style="overflow:hidden" para pai div e style="float: left" para toda a criança divs são importantes para fazer divs alinhe horizontalmente para navegadores antigos como IE7 e anteriores.

Para navegadores modernos, você pode usar style="display: table-cell" para toda a criança divs e seria renderizado horizontalmente corretamente.

Answer 3

você pode usar o clip propriedade:

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

Note o position: absolute e overflow: hidden necessário para conseguir clip trabalhar.

Answer 4

Isso parece próximo 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>

Answer 5

Flutuador:esquerda, exibição:inline-block falhará em alinhar os elementos horizontalmente se eles excederem a largura do contêiner.

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

Answer 6

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

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

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