Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/11/2013, 03:12
Avatar de Adbane
Adbane
 
Fecha de Ingreso: junio-2011
Mensajes: 86
Antigüedad: 13 años, 6 meses
Puntos: 6
Exclamación Problemas de desestructuración con "float: left;"

Hola a todos, estoy teniendo un problema que me gustaría que me ayudarais a resolver.

Estoy trabajando en un timeline básico y sencillo, similar al que usa Facebook. La idea es tener un contenedor (#timeline) y dentro de éste contenedores ".item" que son flotantes, todos con el estilo "float: left;". Luego aplico Masonry para alinearlos correctamente.

El problema viene a ser un fallo a la hora de estructurarse correctamente los elementos, ocurre que cuando un elemento de la derecha no es mas largo, o mejor dicho, su bottom no alcanza el bottom del que tiene a su izquierda, el siguiente elemento (que por defecto debería colocarse a la izquierda) lo hace a la derecha, concretamente debajo del elemento en cuestión. No tiene que ver con el Masonry, pues quitandolo el problema persiste. También me he asegurado de que el problema es exactamente este, pues metiendole más contenido a ese elemento hasta que logra ser lo suficiente "largo", el siguiente se coloca correctamente. Cabe destacar que todos tienen un "height: auto;", lo cual es importante porque el contenido siempre variará por muy largo que sea.

Aquí una imagen del resultado, los elementos rojos deben ir a la izquierda, los verdes a la derecha:


EDIT: Podeis ver un ejemplo de lo que ocurre en JSFiddle: http://jsfiddle.net/Monobe/Yq7GK/

La estructura del HTML es así:
Código HTML:
Ver original
  1. <div id="timeline">
  2.      <div class="item>Lorem ipsum</div>
  3.      <div class="item>Lorem ipsum</div>
  4.      <div class="item>Lorem ipsum</div>
  5.  
  6.      <div class="clear"></div>
  7. </div>

Llamando a Masonry:
Código Javascript:
Ver original
  1. $('#timeline').masonry({itemSelector : '.item'});

Y el CSS:
Código CSS:
Ver original
  1. #timeline { width: 100%; } /*Dentro de un contenedor de 1024px*/
  2. .item {
  3.     width: 50%; height: auto;
  4.     float: left;
  5.     margin-bottom: 20px;
  6. }
  7. .item:nth-child(even) { background: red; }
  8. .item:nth-child(odd) { background: green; }

¿Alguna idea? Se me ocurren maneras de solucionarlo pero son todo soluciones un poco sucias, me gustaría una manera limpia y eficaz para solucionarlo, más que nada porque esta web no es moco de pavo y será autogestionable para una empresa.

¡Muchisimas gracias de antemano!
__________________
Diseñador web por amor al arte, o al HTML mejor dicho

Última edición por Adbane; 08/11/2013 a las 04:40