Как выстроить элементы разной длины в пространстве изменяемого размера в 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. То, что вы уже придумали, связанное с float:left;rule и jQuery, но также с максимальной max_width или
2. Просто заранее определите заранее заданную ширину для всех элементов, исходя из того, какие значения вы ожидаете там увидеть.

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

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

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