¿Cómo alinear elementos de longitud variada en un espacio de tamaño variable en CSS?

Question

Me gustaría alinear elementos aproximadamente como este:

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

Básicamente, elementos de diferente longitud dispuestos en una estructura similar a una mesa.La parte complicada es que el contenedor para estos puede variar en tamaño y me gustaría que quepan tantos como pueda en cada fila; en otras palabras, no sabré de antemano cuántos elementos caben en una línea y si la página Cuando se cambia el tamaño, los elementos deben volver a fluir para acomodarse.P.ej.Inicialmente cabían 10 elementos en cada línea, pero al cambiar el tamaño se podía reducir a 5.

No creo que pueda usar una tabla html porque no sé el número de columnas (ya que no sé cuántas caben en una línea).Puedo usar CSS para hacerlos flotar, pero como son de diferentes tamaños no se alinean.

Hasta ahora, lo único que se me ocurre es usar JavaScript para obtener el tamaño del elemento más grande, establecer el tamaño de todos los elementos en ese tamaño y hacer flotar todo lo que queda.

¿Alguna sugerencia mejor?

Answer 1

Esto se puede hacer usando div flotantes, calculando el ancho máximo y configurando todos los anchos al máximo.Aquí está el código jquery para hacerlo:

HTML:

<div class="item">something</div>
<div class="item">something else</div>

CSS:

div.item { float: left; }

jQuery:

var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);

No demasiado feo pero tampoco demasiado bonito, todavía estoy abierto a mejores sugerencias...

Answer 2

¿Qué sucede cuando obtienes un artículo que es ridículamente grande y hace que el resto parezca pequeño?Consideraría dos soluciones:

1. Lo que ya se te ocurrió que involucra un float:left;regla y jQuery, pero con un max_width máximo también o
2. Simplemente decida de antemano un ancho preestablecido para todos los elementos, según los valores que espera que haya allí.

Luego agregue un overflow:hidden;regla para que los elementos que son más largos no arruinen el aspecto de la mesa.Incluso podrías cambiar la función jQuery para recortar elementos que sean más largos, agregando puntos suspensivos (...) al final.

Answer 3

Podrías usar elementos a nivel de bloque flotando hacia la izquierda, pero necesitarás algo de javascript para verificar los tamaños, encontrar el más grande y configurarlos todos a ese ancho.

EDITAR:Simplemente leí la segunda mitad de tu publicación y vi que sugeriste esta solución.Cuente esta publicación como +1 para su idea actual :)

Answer 4

En realidad, necesitaría calcular el ancho máximo y la altura máxima y luego continuar con una función de cambio de tamaño en Javascript después de que se cargue la página.Tuve que hacer esto para un proyecto anterior y uno de los navegadores (¿FF?) enganchará/compensará los que están debajo si la altura de los divs varía.

Answer 5

Bueno, ¿podrías simplemente crear un div flotante para cada 'elemento', recorrer sus propiedades y usar saltos de línea?Luego, cuando termine de recorrer las propiedades, cierre el div y comience uno nuevo.De esa manera serán como columnas y flotarán una al lado de la otra.Si la ventana es pequeña, bajarán a la siguiente 'línea' y, cuando se cambie su tamaño, volverán a flotar hacia la derecha (que en realidad es la izquierda :-)

Answer 6

Podrías hacer flotar un par de listas desordenadas, como esta:

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

Sería necesario que hiciera algunos cálculos sobre cuántos elementos de lista en cuántas listas se deben insertar en el DOM, pero de esta manera, cuando cambie el tamaño del contenedor que contiene las listas, las listas flotarán para caber en ese contenedor. .

Answer 7

Podrías usar lo siguiente con cada columna del mismo ancho.

Tendrá un ancho de columna fijo, pero la lista se redistribuirá automáticamente.Agregué un poco de HTML adicional pero ahora funciona en FF e IE.

HTML:

<ul class="ColumnBasedList">
  <li><span>Item1 2</span></li>
  <li><span>Item2 3</span></li>
  <li><span>Item3 5</span></li>
  <li><span>Item4 6</span></li>
  <li><span>Item5 7</span></li>
  <li><span>Item6 8</span></li>
</ul>

CSS:

.ColumnBasedList
{
    width: 80%;
    margin: 0;
    padding: 0;
}

.ColumnBasedList li
{
    list-style-type: none;
    display:inline;
}

.ColumnBasedList li span
{
    display: -moz-inline-block;
    display: inline-block;
    width: 20em;
    margin: 0.3em;
}