Como alinhar itens de comprimento variado em um espaço redimensível no CSS?

Question

Eu gostaria de alinhar itens aproximadamente assim:

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

Basicamente, itens de comprimento variável dispostos em uma mesa como estrutura. A parte complicada é o contêiner, pois eles podem variar de tamanho e eu gostaria de caber o máximo possível em cada linha - em outras palavras, não saberei de antemão quantos itens se encaixam em uma linha e se a página é redimensionado que os itens devem se refletir novamente para acomodar. Por exemplo, inicialmente 10 itens podem caber em cada linha, mas em redimensionamento, pode ser reduzido para 5.

Acho que não posso usar uma tabela HTML, pois não conheço o número de colunas (já que não sei quantos caberão em uma linha). Eu posso usar o CSS para flutuar, mas como eles são de tamanho variável, eles não se alinham.

Até agora, a única coisa que consigo pensar é usar o JavaScript para obter o tamanho do maior item, definir o tamanho de todos os itens para esse tamanho e flutuar tudo restante.

Alguma sugestão melhor?

Answer 1

Isso pode ser feito usando o DIV flutuado, calculando a largura máxima e definindo todas as larguras ao máximo. Aqui está o código jQuery para fazer isso:

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);

Não muito feio, mas também não muito bonito, ainda estou aberto a melhores sugestões ...

Answer 2

O que acontece quando você obtém um item que é ridiculamente grande e faz o resto parecer pequeno? Eu consideraria duas soluções:

1. O que você já criou envolvendo um flutuador: à esquerda; regra e jQuery, mas com um max max_width também ou
2. Basta decidir sobre uma largura predefinida para todos os itens antes da mão, com base nos valores que você espera estar lá

Em seguida, adicione um estouro: oculto; Regra para que os itens mais longos não scew the Tablelow. Você pode até alterar a função jQuery para aparar itens mais longos, adicionando uma elipsis (...) ao final.

Answer 3

Você pode usar elementos de nível de bloco flutuados à esquerda, mas precisará de algum JavaScript para verificar os tamanhos, encontrar o maior e definir todos eles nessa largura.

EDIT: Basta ler a segunda metade do seu post e vi que você sugeriu apenas essa correção. Conte este post como +1 para sua ideia atual :)

Answer 4

Na verdade, você precisaria calcular a maxwidth e o MaxHeight e depois passar com uma função de redimensionamento no JavaScript após a carga da página. Eu tive que fazer isso para um projeto anterior e um dos navegadores (FF?)

Answer 5

Bem, você poderia simplesmente criar uma div e um 'item' e percorrer suas propriedades e usar o Linebreaks? Então, quando você terminar de loop sobre as propriedades, feche a div e inicie uma nova? Dessa forma, eles serão como colunas e apenas flutuam um ao lado do outro. Se a janela for pequena, eles cairão para a próxima 'linha' e, quando redimensionados, flutuarão de volta para a direita (que é realmente a esquerda :-)

Answer 6

Você pode flutuar algumas listas não ordenadas, 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>

Isso exigiria que você fizesse alguns cálculos sobre quantos itens de lista em quantas listas devem ser empurradas para o DOM, mas dessa maneira - quando você redimensiona o contêiner que mantém as listas - as listas flutuam para caber nesse contêiner .

Answer 7

Você pode usar o seguinte com cada coluna a mesma largura.

Você terá uma largura fixa da coluna, mas a lista se refletirá automaticamente. Eu adicionei um pouco de HTML extra, mas agora funciona no FF EN 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;
}