Foros del Web » Creando para Internet » CSS »

Alinear divs horizontalmente

Estas en el tema de Alinear divs horizontalmente en el foro de CSS en Foros del Web. Hola. Espero que alguien me pueda ayudar... tengo una serie de divs (un numero indeterminado, depende de una consulta a la base de datos) los ...
  #1 (permalink)  
Antiguo 11/07/2013, 01:20
 
Fecha de Ingreso: octubre-2007
Mensajes: 13
Antigüedad: 15 años, 3 meses
Puntos: 0
Alinear divs horizontalmente

Hola.
Espero que alguien me pueda ayudar... tengo una serie de divs (un numero indeterminado, depende de una consulta a la base de datos) los cuales tienen un tamaño variable. Estos divs tienen las propiedades siguientes: float:left y width:30%. El problema que tengo es que al mostrar los divs por pantalla, en el momento en que un div tenga un tamaño distinto al resto, me descompone toda la alineacion de los divs :S

Lo que me gustaria hacer seria que cuando uno de los divs tenga un tamaño mayor que el resto, la siguiente fila de divs aparezca alineada horizontalmente...

Adjunto una imagen para aclarar un poco lo que me gustaria...

Estoy casi seguro que existe alguna propiedad css que puede hacer esto... o sino un pequeño con html para conseguirlo...

Recalcar que el numero de divs es indefinido y no puedo crear un contenedor para cada grupo de 3 divs para alinearlos...

Espero que alguien me pueda ayudar, se lo agradeceria mucho!!!

Gracias!
  #2 (permalink)  
Antiguo 11/07/2013, 02:18
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 6 meses
Puntos: 2114
Respuesta: Alinear divs horizontalmente

¿Puedes poner el código que estás usando? En este foro una linea dice más que mil imágenes.
  #3 (permalink)  
Antiguo 14/07/2013, 08:57
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 14 años, 5 meses
Puntos: 187
Respuesta: Alinear divs horizontalmente

Como dice pzin, sin ver demasiado código no creo que se pueda hacer mucho, pero creo que tu problema se solucionaría de la siguiente manera, a los divs indeterminados esos que tus dices deberían tener las siguientes etiquetas:

Código CSS:
Ver original
  1. div {
  2.    display:inline-block; /*Los convierte en bloques en lineas, lo que hace que al completarse una linea (de tres en tu caso, el proximo baje a la línea de abajo. El alto de la linea estaría formado por el div mas alto*/
  3.    width: 30%; /*El ancho que tu definiste*/
  4.    vertical-align:top; /*Para que se alineen al comienzo de la linea y no a la base (comportamiento por defecto*/
  5.    *display: inline; /*Para que funcione en IE7, en caso de ser necesario*/
  6.    zoom: 1;/*Para que funcione en IE7, en caso de ser necesario*/
  7. }

Aqui tienes un ejemplo funcionando: http://jsfiddle.net/Y2NqT/5/

Última edición por ryugen; 14/07/2013 a las 09:05
  #4 (permalink)  
Antiguo 26/09/2013, 13:16
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 600
Antigüedad: 15 años, 6 meses
Puntos: 56
Respuesta: Alinear divs horizontalmente

Cita:
Iniciado por ryugen Ver Mensaje
Como dice pzin, sin ver demasiado código no creo que se pueda hacer mucho, pero creo que tu problema se solucionaría de la siguiente manera, a los divs indeterminados esos que tus dices deberían tener las siguientes etiquetas:

Código CSS:
Ver original
  1. div {
  2.    display:inline-block; /*Los convierte en bloques en lineas, lo que hace que al completarse una linea (de tres en tu caso, el proximo baje a la línea de abajo. El alto de la linea estaría formado por el div mas alto*/
  3.    width: 30%; /*El ancho que tu definiste*/
  4.    vertical-align:top; /*Para que se alineen al comienzo de la linea y no a la base (comportamiento por defecto*/
  5.    *display: inline; /*Para que funcione en IE7, en caso de ser necesario*/
  6.    zoom: 1;/*Para que funcione en IE7, en caso de ser necesario*/
  7. }

Aqui tienes un ejemplo funcionando: http://jsfiddle.net/Y2NqT/5/

Hola Ryugen, gracias por el link, yo estaba buscando algo parecido, pero que en el caso de que el div tenga menos altura, en vez de quedar un hueco en blanco, el div que está abajo suba para no dejar márgenes. ¿Es posible hacer esto?.

Gracias de antemano.

Etiquetas: alinear, horizontal
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 03:13.