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


1

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

item1  item2   i3   longitemname 
i4   longitemname2 anotheritem i5 

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

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

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

Любые лучшие предложения?

  0

Вы должны поддерживать IE? 24 сен. 082008-09-24 00:59:08

2

Это можно сделать, используя floated 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); 

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


0

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

EDIT: Просто прочитайте вторую половину своего сообщения и увидите, что вы предложили именно это исправление. Подсчитайте этот пост как +1 для вашей текущей идеи :)


0

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


0

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


0

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

<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, но этот путь - когда вы измените размер контейнер, который содержит списки - списки будут плавать, чтобы вписаться в этот контейнер.

  0

Но я не знаю, сколько предметов положить в каждую улицу. 23 сен. 082008-09-23 19:55:08

  0

Тогда я думаю, вы должны использовать таблицу. То есть - в конце концов - для каких таблиц. Но я полагаю, что есть хороший аргумент в том, что он не делает этого? :) 23 сен. 082008-09-23 20:01:13

  0

В любом случае: быть прагматичным. Если он работает кросс-браузер, то он работает. Если что-то сломается или код, который вы написали, становится слишком медленным, THEN настраивает и исправляет настройку. Когда-либо слышал девиз «запустить дерьмо, но запустить»? Клянусь этим (за некоторыми исключениями, конечно, - этот случай не является одним из них). 23 сен. 082008-09-23 20:12:56

  0

... Поскольку вы, похоже, придумали решение, хотя и не очень красивое. 23 сен. 082008-09-23 20:13:45


1

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

  1. Что вы уже придумали с участием поплавка: слева; править и JQuery, но с максимальной max_width, а или
  2. Просто принять решение по заданной ширины для всех элементов, прежде чем руки, основываясь на том, что значения, которые вы ожидаете, чтобы быть там

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


0

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

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

Этот не работает для меня - он отображается как простой список, не reflowing (FF 2.x). 23 сен. 082008-09-23 20:19:46

  0

дисплей: встроенный блок; должен отображаться: inline; 23 сен. 082008-09-23 21:50:15

  0

нет ... поддерживается только в ff3. и, кроме того, hes устанавливает фиксированную ширину, так что она не работает. это в значительной степени просто таблица. 24 сен. 082008-09-24 00:58:11

  0

Правильно, я изменил свой ответ, чтобы сделать его перекрестным браузером. 24 сен. 082008-09-24 08:05:29