2

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:

Como deveria ficar

E o código que estou utilizando é esse:

HTML

<div class="center">
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
        </div>
    </div>

CSS

.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;
}

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.

2
  • Boa noite, poste o html e css de maneira que possamos reproduzir o problema.
    – Syzoth
    Commented 31/10/2015 às 23:11
  • 1
    Boa noite, sobre a indentação e marcação basta olha no momento da edição um icone com sinal de interrogação que fica na parte superior do editor de texto do stackoverflow, nele tem dicas de como formatar.
    – Syzoth
    Commented 1/11/2015 às 1:00

1 Resposta 1

6

Para fazer isso tens que utilizar a propriedade column-count em vez do float:left; como no exemplo abaixo. Esta propriedade divide o conteúdo dentro de uma div no qual esta propriedade é atribuída, em várias colunas dependendo do valor que lhe aplicarmos (ex: column-count: 3;).

Infelizmente, nem todos os elementos fluem como deve ser quando aplicada esta propriedade, mas felizmente temos a solução para isso que é utilizar a propriedade break-inside, nos elementos que se encontram dentro de um layout de colunas.

Eis um exemplo abaixo deste layout de colunas em funcionamento e já preparado para ecrãs de pequenas e grandes resoluções:

Tens aqui também um exemplo no jsFiddle se preferires.

#colunas {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 15px;
}
.boxpost {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-color: #936C6C;
    margin: 0 2px 15px 2px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.maior{height:150px;}

@media (min-width: 960px) {
    #colunas {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #colunas {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}
<div id="colunas">
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
</div>

Referências: CSS3 column-count Property, break-inside

Existe também o plugin - Masonry em jQuery,

que faz este mesmo trabalho ligeiramente diferente, se preferires.

Para utilizar o plugin basta o implementares no <head> do teu site como (e juntamente com) a Biblioteca jQuery com a seguinte linha de código:

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

Depois basta criares as tuas divs, por exemplo:

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

e apontá-las para utilização do plugin com este bocado de código jQuery da seguinte forma:

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
}); 

Podes ver um exemplo do plugin em funcionamento aqui neste link: http://jsfiddle.net/rgzsxayn/

Podes saber mais sobre o plugin e ler a sua documentação aqui: Masonry
Disponível no Github: Masonry no Github

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 .