Skip to main content
appended answer 95786 as supplemental
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

O problema é que eu tenho que tirar as heights e sempre colocar o overflow auto, porque podem vir imagens de tamanhos diferenciados, e até mesmo para a estética do negócio ficar mais descontraida dai coloquei overflow auto e temos um novo problema, as divs se misturam, tipo coloco 4 divs com imagens diferentes, a quarta div vira a segunda no site, e tudo fica embaralhado.


O problema é que eu tenho que tirar as heights e sempre colocar o overflow auto, porque podem vir imagens de tamanhos diferenciados, e até mesmo para a estética do negócio ficar mais descontraida dai coloquei overflow auto e temos um novo problema, as divs se misturam, tipo coloco 4 divs com imagens diferentes, a quarta div vira a segunda no site, e tudo fica embaralhado.

Título e corpo aperfeiçoado
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57

Margin top automatico Como criar "grid" com elementos flutuantes semelhante ao Pinterest

Olá, preciso flutuar as divsestou a leftcriar uma grid com divs a flutuar à esquerda, porém quando chega aà quinta divdiv no bloqueio de 1000px1000px, ela flutua aà direita, e não a leftà esquerda como deveria ser e a margin topmargin-top fica maior para todas as depois deladivs seguintes, ou seja da quinta div em diante olhema partir do quinto elemento, as divs seguintes ficam com um grande espaçamento no seu topo.

Vejam no exemplo desta imagem abaixo:   

aqui está a ilustração do problema

E eu quero que fiqueelas fiquem assim:

Desculpe pela indentação do código css, tentei colocar na tag code

Margin top automatico

Olá, preciso flutuar as divs a left, porém quando chega a quinta div no bloqueio de 1000px ela flutua a direita, e não a left e a margin top fica maior para todas as depois dela, ou seja da quinta div em diante olhem :  aqui está a ilustração do problema

quero que fique assim:

Desculpe pela indentação do código css, tentei colocar na tag code

Como criar "grid" com elementos flutuantes semelhante ao Pinterest

Olá, estou a criar uma grid com divs a flutuar à esquerda, porém quando chega à quinta div no bloqueio de 1000px, ela flutua à direita e não à esquerda como deveria ser e a margin-top fica maior para todas as divs seguintes, ou seja a partir do quinto elemento, as divs seguintes ficam com um grande espaçamento no seu topo.

Vejam no exemplo desta imagem abaixo: 

aqui está a ilustração do problema

E eu quero que elas fiquem assim:

adicionou 85 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

.center{ margin: 0 auto; width:1024px; } .boxpost{ width:245px; overflow:auto; background-color: #f7f7f7; border-radius: 3px; float:left; margin-top: 10px; margin-left: 10px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important; padding-bottom: 5px; } .profilepost{ float: left; width: 100%; height:50px; border-bottom:1px solid #CCCCCC; }

.center{
    margin: 0 auto;
    width:1024px;
}
.boxpost{
    width:245px;
    overflow:auto;
    background-color: #f7f7f7;
    border-radius: 3px;
    float:left;
    margin-top: 10px;
    margin-left: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    padding-bottom: 5px;
}
.profilepost{
    float: left;
    width: 100%;
    height:50px;
    border-bottom:1px solid #CCCCCC;
}

Desculpe pela identaçãoindentação do código css, tentei colocar na tag code

.center{ margin: 0 auto; width:1024px; } .boxpost{ width:245px; overflow:auto; background-color: #f7f7f7; border-radius: 3px; float:left; margin-top: 10px; margin-left: 10px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important; padding-bottom: 5px; } .profilepost{ float: left; width: 100%; height:50px; border-bottom:1px solid #CCCCCC; }

Desculpe pela identação do código css, tentei colocar na tag code

.center{
    margin: 0 auto;
    width:1024px;
}
.boxpost{
    width:245px;
    overflow:auto;
    background-color: #f7f7f7;
    border-radius: 3px;
    float:left;
    margin-top: 10px;
    margin-left: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    padding-bottom: 5px;
}
.profilepost{
    float: left;
    width: 100%;
    height:50px;
    border-bottom:1px solid #CCCCCC;
}

Desculpe pela indentação do código css, tentei colocar na tag code

adicionou 1591 caracteres ao conteúdo
Fonte Link
Carregando
adicionou 39 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Fonte Link
Carregando