1

Tenho uma div pai que é responsável por agrupar determinadas quantidades de filhos.

O problema é preciso que essa div fique sempre alinhada à esquerda, sem deixar espaços em branco, porém cada div pai tem um número diferente de elementos filhos.

Isso faz com que cada div pai tenha um height diferente, e, consequentemente, o float: left em alguns casos faz com que um elemento fique alinhado à direita, deixando um enorme espaço em branco a esquerda. Isso quando não fica um espaço em branco em cima.

Vou exemplificar o problema que tenho com duas imagens:

Problema

Os items deveriam ficar flexíveis, porém estão deixando um espaço indesejado

Os items deveriam ficar flexíveis, porém estão deixando um espaço indesejado

Solução desejada

inserir a descrição da imagem aqui

3
  • 1
    Tipo o site Pinterest ? Commented 7/08/2015 às 13:36
  • Exatamante, @DiegoSouza Commented 7/08/2015 às 13:41
  • 1
    Uma vez que precisei disso usei um plugin jQuery. Se for do seu interesse é esse aqui: jqueryscript.net/demo/…. Talvez você já tenha pesquisado. Commented 7/08/2015 às 13:42

1 Resposta 1

-1

tente utilizar a seguinte marcação HTML que deve funcionar:

#conteudo {
  float: left;
  width: 80%;
  height: 400px:
}
#barra-lateral {
  float: right;
  width: 20%;
  height: 400px;:
}

.item {
  background-color: red;
  display: inline-block;
  margin: 10px;
}

#conteudo .item {
  width: 100px;
  height: 100px;
}

#barra-lateral .item {
  width: 95%;
  height: 95%
}
<div id="conteudo">
  <div class="item">1</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<div id="barra-lateral">
  <div class="item">2</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .