Comunidad de diseño web y desarrollo en internet online

Problema con floats!

Citar            
MensajeEscrito el 25 Jul 2014 03:02 am
Estoy intentando hacer un pinterest personal... Pero me encuentro con un fallo a la hora de posicionar las columnas...



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.

Por SteveSegura

3 de clabLevel



Genero:Masculino  

Soy fotografo

chrome
Citar            
MensajeEscrito el 25 Jul 2014 01:55 pm
No es un fallo. Los elementos que se vayan añadiendo se posicionarán en la columna con menor altura para aprovechar mejor el espacio. El siguiente elemento que introduzcas aparecerá en la sexta columna, y el siguiente en la tercera.

Si intentas hacer que se posicionen en orden puede darse el caso de que los elementos de la primera columna sean más altos que los de el resto, dando lugar a que esa primera columna crezca mucho hacia abajo.

Por Alivan

288 de clabLevel

3 tutoriales

Genero:Masculino  

Aprendo de Internet

firefox
Citar            
MensajeEscrito el 25 Jul 2014 04:45 pm
Cierto lo que dice Alivan, si te fijas en el párrafo del 3er elemento de la 1ra fila, es mas grande que el de la 5ta columna.

Por lo que la altura de la 3ra columna es mayor al de la 5ta

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 25 Jul 2014 11:51 pm
Hola!

Investigando me he dado cuenta de esto... sabeis alguna manera de la que se pueda ordenar por orden semantico de html? y no por espacios? He buscado en las opciones de Masonry, pero no tiene dicha funcionalidad.

Y pensandolo bien, Es mejor que esten ordenados por arriba, que no por abajo.

Gracias a todos.

Por SteveSegura

3 de clabLevel



Genero:Masculino  

Soy fotografo

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.