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
