Foros del Web » Creando para Internet » CSS »

divs dinámicamente como celdas en tablas de 1 ó 2 columnas

Estas en el tema de divs dinámicamente como celdas en tablas de 1 ó 2 columnas en el foro de CSS en Foros del Web. Hola a todos, estoy diseñando la página de resultados de un buscador. Digamos que cada resultado aparece en un div.item de 400x100, todos ellos dentro ...
  #1 (permalink)  
Antiguo 13/08/2009, 07:49
Avatar de caerolus  
Fecha de Ingreso: agosto-2004
Ubicación: Madrid, España
Mensajes: 280
Antigüedad: 13 años, 3 meses
Puntos: 1
divs dinámicamente como celdas en tablas de 1 ó 2 columnas

Hola a todos,

estoy diseñando la página de resultados de un buscador. Digamos que cada resultado aparece en un div.item de 400x100, todos ellos dentro de un div#resultados contenedor de 400 de ancho:
Código HTML:
<style>
#resultados{
	width:400px;
	padding:0px;
	margin:0px;
	border:1px solid blue;
}
.item{
	width:400px;
	height:100px;
	padding:0px;
	margin:0px;
	border:1px solid red;
}
</style>
<div id="resultados">
<div class="item">resultado 1</div>
<div class="item">resultado 2</div>
<div class="item">resultado 3</div>
<div class="item">resultado 4</div>
<div class="item">resultado 5</div>
</div> 
Hasta aquí todo bien. El problema está en que, sin recargar la página, he de poder mostrar los resultados en 2 columnas, de forma que #resultados tenga un ancho de 800. Algo así:
Código:
resultado 1    resultado 2
resultado 3    resultado 4
resultado 5
La solución que pensé fue agrupar los .item de dos en dos en otro div.grupo, y hacer que #resultados cambiase a display:table.
.grupo podría tener display:table-row-group para el caso de una columna, y display:table-row para el caso de dos columnas.
.item tendría display:table-row para el caso de una columna, y display:table-cell para el caso de dos columnas.
Probé esto, y en Firefox y Chrome parece funcionar, pero, para la sorpresa... IE no soporta display:table-xx

Así que no tengo muy claro cómo hacer esto. El concepto es simplemente hacer que los .item salgan unos detrás de otros. Cuando el ancho del contenedor es 400 sólo caben unos debajo de otros, cuando es de 800 caben dos "en una fila".

Alguien puede ayudarme? Muchas gracias
__________________
Mi página personal: Julián Urbano
  #2 (permalink)  
Antiguo 13/08/2009, 07:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: divs dinámicamente como celdas en tablas de 1 ó 2 columnas

¿y cómo cambias la anchura de #resultados de 400px a 800px?
No lo tengo claro, así que esto posiblemente no te sirva:
Cita:
#resultados{
overflow: hidden /* o 'auto'*/;
...
}

.item{
float: left
width:398px;

height:100px;
padding:0px;
margin:0px;
border:1px solid red;
}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 13/08/2009, 08:04
Avatar de caerolus  
Fecha de Ingreso: agosto-2004
Ubicación: Madrid, España
Mensajes: 280
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: divs dinámicamente como celdas en tablas de 1 ó 2 columnas

muchas gracias

Pensaba cambiar el ancho simplemente con javascript, en el evento onclick de un botón. O bien cambiar el ancho directamente o cambiar de una clase con 400 a otra clase con 800. No lo conté por no liar

Lo que me has dado funciona perfectamente. No sabía que overflow:hidden tuviese ese efecto para estas cosas, sólo lo usaba para no expandir divs cuando el texto fuera demasiado largo.

__________________
Mi página personal: Julián Urbano
  #4 (permalink)  
Antiguo 13/08/2009, 08:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: divs dinámicamente como celdas en tablas de 1 ó 2 columnas

No, Caerolus, el overflow está colocado sólo para que #resultados crezca (en la vertical en este caso) a la par que sus contenidos (que están flotados). Lo que hace posicionarse 2 a 2 en una anchura de 400px es el float de .item.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 13/08/2009, 08:20
Avatar de caerolus  
Fecha de Ingreso: agosto-2004
Ubicación: Madrid, España
Mensajes: 280
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: divs dinámicamente como celdas en tablas de 1 ó 2 columnas

me refería a que cuando se especifica altura, overflow:hidden oculta los hijos que se salgan, pero cuando no se especifica altura expande el contenedor todo lo necesario. Eso es lo que no sabía, y me viene muy bien saberlo
__________________
Mi página personal: Julián Urbano
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 17:54.