Как выстроить элементы различной длины в пространстве с изменяемыми размерами в CSS?

Question

Я бы хотел выстроить элементы примерно так:

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

В основном предметы различной длины, расположенные в виде таблицы. Сложная часть - это контейнер, который может различаться по размеру, и я хотел бы разместить как можно больше в каждой строке - другими словами, я не буду знать заранее, сколько элементов помещается в строке, и будет ли страница При изменении размеров элементы должны перетекать сами, чтобы приспособиться. Например. Первоначально 10 элементов могли помещаться в каждой строке, но при изменении размера их можно было бы уменьшить до 5.

Я не думаю, что смогу использовать html-таблицу, поскольку не знаю количества столбцов (поскольку я не знаю, сколько из них уместится в строке). Я могу использовать css для их размещения, но поскольку они имеют разный размер, они не будут выстраиваться в линию.

Пока что я могу думать только о том, чтобы использовать javascript, чтобы получить размер самого большого элемента, установить размер всех элементов на этот размер и переместить все оставшееся.

Есть лучшие предложения?

Answer 1

Это можно сделать с помощью плавающих элементов div, расчета максимальной ширины и установки максимальной ширины для всех значений. Вот код jquery, чтобы сделать это:

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

Не слишком уродливо, но и не слишком красиво, я все еще открыт для лучших предложений ...

Answer 2

Что происходит, когда вы получаете один предмет, который очень большой, а остальные выглядят маленькими? Я бы рассмотрел два решения:

1. То, что вы уже придумали с помощью поплавка: слева; rule и jQuery, но также с max max_width или
2. Просто выберите предварительно заданную ширину для всех элементов перед рукой, исходя из того, какие значения вы там ожидаете

Затем добавьте переполнение: скрыто; правило, чтобы предметы, которые длиннее, не выглядели как стол. Вы даже можете изменить функцию jQuery, чтобы обрезать более длинные элементы, добавив в конец elipsis (...).

Answer 3

Вы можете использовать следующее с каждым столбцом одинаковой ширины.

У вас будет фиксированная ширина столбца, но список автоматически обновится. Я добавил немного дополнительного HTML, но теперь он работает в FF и 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;
}

Answer 4

Вы можете создать пару неупорядоченных списков, например:

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

Это потребует от вас некоторых вычислений того, сколько элементов списка в скольких списках следует поместить в DOM, но таким образом, когда вы изменяете размер контейнера, в котором хранятся списки, списки будут плавно соответствовать в этот контейнер.

Answer 5

Ну, не могли бы вы просто создать плавающий элемент div для каждого «элемента», просмотреть его свойства и использовать переносы строк? Затем, когда вы закончите зацикливание свойств, закроете div и начнете новый? Таким образом они будут похожи на колонны и будут просто плавать рядом друг с другом. Если окно маленькое, оно опустится до следующей «строки» и при изменении размера вернется обратно вправо (что на самом деле слева: -)

Answer 6

На самом деле вам нужно будет вычислить maxWidth и maxHeight, а затем выполнить функцию изменения размера в Javascript после загрузки страницы. Я должен был сделать это для предыдущего проекта, и один из браузеров (FF?) Зацепит / сместит нижние, если высота элементов будет отличаться.

Answer 7

Вы можете использовать элементы уровня блока с плавающей точкой влево, но вам понадобится JavaScript, чтобы проверить размеры, найти самый большой и установить их все на эту ширину.

РЕДАКТИРОВАТЬ: Просто прочитайте вторую половину вашего поста, и увидел, что вы предложили только это исправить. Считайте этот пост +1 для вашей текущей идеи:)