Skip to main content
4 de 6
adicionou 85 caracteres ao conteúdo
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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:

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

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