Como se puede apreciar en la ultima fila solo hay 1 elemento y se posiciona automaticamente en la 5ª posición he probado a revisar todo el codigo, he incluso añadi un div
con la propiedad "Overflow: Hidden"... Encontre esa respuesta en el foro... pero sigue en la 5º posición... Estoy usando Masonry y Jquery.
Aqui les pego el codigo html
Código :
<div class="todos"> <div class="lista"> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-frc3/v/t1.0-9/574700_4050595537715_935367771_n.jpg?oh=8a6caec3dd9df1ae5e81ec2eb282d9c1&oe=5442BF07&__gda__=1412670136_3f54d1c2042d63c1c7084d654a82ae2e" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante.Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante.Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/s960x960/193585_4013508130553_1490153461_o.jpg" alt=""> <h3>SWAGGY2</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/s960x960/193585_4013508130553_1490153461_o.jpg" alt=""> <h3>SWAGGY3</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY4</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/904365_10200341055143451_1292219699_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/s960x960/193585_4013508130553_1490153461_o.jpg" alt=""> <h3>SWAGGY</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> <div class="elementos"> <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/s960x960/193585_4013508130553_1490153461_o.jpg" alt=""> <h3>SWAGGY3</h3> <p>Esta es la super mega tendencia swaggy por que el bla bla bla postureo es lo mas importante</p> </div> </div> </div> </div> <script> var container = document.querySelector('.todos'); var msnry = new Masonry( container, { // options itemSelector: '.elementos' }); </script>
y por aqui les dejo el CSS con sintaxis de STYLUS.
Código CSS :
.todos width 95% padding 2em 0em 0em 8.9em margin 0em 0em 0em 0em float left .lista overflow hidden .elementos display inline-block padding 0em 0em 2em 0em margin 0em 1em 2em 1em width 15em background #DA4453 -webkit-border-radius 3% .elementos img padding 1em 1em 0.1em 1em .elementos h3 margin 0.3em 0em 0em 0.9em text-align left color white .elementos p font-size 12px margin 0.7em 0.7em 0em 1.2em text-align left color white
Tambien uso foundation, pero no creo que sea debido a eso.
Muchas gracias a todos de ante mano!
Saludos.