CSS - Alinha os divs horizontalmente

84

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.

Robin Barnes
fonte
8
Os links das suas imagens parecem ter quebrado. Se você ainda tiver os originais, carregue-os novamente em stack.imgur. Obrigado!
Ilmari Karonen

Respostas:

99

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>

LucaM
fonte
como posso então fazer o centro div externo? Tentei adicionar align = "center" no div externo, parece que não funciona.
hakunami
1
Isso também funciona para larguras percentuais. No meu caso, estou usando um div contêiner com width: 200%;e os elementos filhos são each width: 50%;. Posso então usar transform: translateX(n%);no contêiner para emular um efeito de carrossel, contanto que eu tenha um contêiner pai comoverflow: hidden;
evolross
31

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.

Kwex
fonte
6

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>

Sören Kuklau
fonte
5

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.

fcurella
fonte
4
qual é o suporte do navegador do clip?
alex
1
De w3schools.com/cssref/pr_pos_clip.asp : A propriedade clip é compatível com todos os principais navegadores. Observação: o valor "inherit" não é compatível com o IE7 e anteriores. O IE8 requer um! DOCTYPE. O IE9 suporta "herdar".
dsomnus
4

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

William B
fonte
4

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 */
  ;
}
sriram hegde
fonte
solução elegante.
zawhtut
1

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

Wolfpack'08
fonte
0

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>

Manjuboyz
fonte