Foros del Web » Creando para Internet » CSS »

acomodar div con float

Estas en el tema de acomodar div con float en el foro de CSS en Foros del Web. holaa forer@s necesito su sabio consejo tengo unos div que quiero que queden asi: http://s3.subirimagenes.com:81/image..._7541315a1.png pueden irse agregando mas cajitas y estas deberan acomodarse asi, ...
  #1 (permalink)  
Antiguo 17/03/2012, 12:31
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
acomodar div con float

holaa forer@s

necesito su sabio consejo

tengo unos div que quiero que queden asi:

http://s3.subirimagenes.com:81/image..._7541315a1.png


pueden irse agregando mas cajitas y estas deberan acomodarse asi, por ejemplo, la numero 5 pegada al margan izquierdo, la 6 pegada a la caja 5 y asi sucesivamente, pero en cambio que es lo que ocurre:

http://s2.subirimagenes.com/imagen/p..._7541318a2.png


el css que tengo es:

Código HTML:
.columnas{
	width:375px; 
	float:left;
	margin-right:2px;
}
no se que deba agregar o quitar o cambiar para que se logrean acomodar asi como quiero, de antemano gracias
  #2 (permalink)  
Antiguo 17/03/2012, 13:32
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
Respuesta: acomodar div con float

ya se que pasa, el css esta bien planteado si las cajas fueran del mismo alto, pero como en realidad no tienen un alto determinado y de hecho no lo tendrán (cada una tendra un heigth diferente y variable)



entonces la pregunta cambia un poco

como lograr que se acomoden de la forma sin importar el alto de cada caja??



gracias
  #3 (permalink)  
Antiguo 18/03/2012, 15:02
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: acomodar div con float

Hola, una solución sería crear dos cajas que serán las "columnas" dentro de las cuales irán las cajas numeradas.
En la caja columna izquierda ubicas los impares, y en la caja columna derecha los pares.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 18/03/2012, 15:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: acomodar div con float

Quizás pueda utilizar las multicolumnas de css
http://www.w3.org/TR/css3-multicol/
Con sus particularidades.

Pero si su realización es lo suficientemente compleja, una pizca de js le vendrá bien y asegurará la funcionalidad con más navegadores y sus versiones antiguas.

Porque es demasiado pronto recomendarle el flexbox si es una trabajo "de producción".
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 18/03/2012, 16:13
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: acomodar div con float

Muy interesante tu articulo flexbox kseso?
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 18/03/2012, 16:15
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: acomodar div con float

una vez lo necesité y usé jquery.masonery, no investigué como funciona internamente ni sabría como hacerlo desde "solo css"
  #7 (permalink)  
Antiguo 18/03/2012, 19:55
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
Respuesta: acomodar div con float

Gracias a todos por sus respuestas, no las he analizado bien aun, solo les eche un vistazo rápido, la verdad no pensé que fuera tan complicado, incluso tenia entendido que el display inline podría lograr esto, ya lo probe pero no funciona,

con display inline cada caja "se estira" y ocupa todo el ancho del div padre y con inline-block y block las pone una tras otra

no quisiera complicarme tanto con jqwery y me preocupa también la compatibilidad con otros navegadores, no se que opción me conviene más

analizaré bien sus propuestas y les comento, gracias

Etiquetas: acomodar, float
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:37.