список HTML разбит на несколько столбцов

1'm пытаются разделить мой список на несколько столбцов.список HTML разбит на несколько столбцов

Пример

<ul class="loremipsum"> 
    <li><a href="#">Lorem ipsum 01</a></li> 
    <li><a href="#">Lorem ipsum 02</a></li> 
    <li><a href="#">Lorem ipsum 03</a></li> 
    <li><a href="#">Lorem ipsum 04</a></li> 
    <li><a href="#">Lorem ipsum 05</a></li> 
    <li><a href="#">Lorem ipsum 06</a></li> 
    <li><a href="#">Lorem ipsum 07</a></li> 
    <li><a href="#">Lorem farem 08</a></li> 
    <li><a href="#">Lorem ipsum 09</a></li> 
    <li><a href="#">Lorem ipsum 10</a></li> 
    <li><a href="#">Lorem ipsum 11</a></li> 
    <li><a href="#">Lorem ipsum 12</a></li> 
    <li><a href="#">Lorem ipsum 13</a></li> 
    <li><a href="#">Lorem ipsum 14</a></li> 
    <li><a href="#">Lorem ipsum 15</a></li> 
    <li><a href="#">Lorem ipsum 16</a></li> 
</ul>

Lorem Ipsum 01 Lorem Ipsum 06 Lorem Ipsum 11 Lorem Ipsum 16

Lorem Ipsum 02 Lorem Ipsum 07 Lorem Ipsum 12 и т.д.

Lorem Ipsum 03 Lorem Ipsum 08 Lorem что 13

04 Lorem Lorem очень очень Lorem 09 14

05 Lorem Ipsum Lorem Ipsum Lorem Ipsum 10 15

Это не проблема с JQuery, как 1 нашел "простой список Splitter". Однако это не дает мне ни с чем 1 нуждается.

Проблемы со сценарием «простой список Splitter» является то, что 1 нужно поместить в количестве столбцов. Это проблема для меня, потому что 1'll добавлять новые элементы в этот список в неделю (если не ежедневно) в верхней части списка. Это означало бы, 1 потребуется отредактировать JS файл каждый раз.

Теперь, даже не будет большой проблемой (editting количество столбцов). Однако, некоторые из этих элементов списка (возможно 1 из 10) является ссылка на изображение. Что

1 хотел бы выполнить это (номера только примеры):

обертка ДИВ с 300px высотой
каждый элемент списка имеет мин-высота 60px
макс. 5 штук в колонке
мин. 1 пункт в колонке конечно
любой колонке (слева, справа или в центре) должен быть в состоянии иметь только один элемент списка, если этот пункт 1 Список является 300px высоты, например (или 2 из 150px и т.д.)
должен быть вертикальный список
новый столбец автоматически создается справа от других столбцов

лучше спросить ........ возможно ли это? Если новые 504-х будет показано ниже/на верхней части друг друга, а не рядом с Афоризм, проблема была решена уже.

большой большое спасибо заранее!

если какие-либо вопросы, пожалуйста, спрашивайте.

источник

2013-06-19 user2500750

Ближайшее решение сделать 1 найдено 51 поплавка влево и назначить ширину 33% (в течение 3 столбца), но она не будет заполнять колонку перед началом другой. CSS действительно не является сложным.

.loremipsum li { 
    display: inline; 
    float: left; 
    width: 25%; 
}

http://jsfiddle.net/cSJNm/

источник

2013-06-19 11:38:01 Edorka

действительно так, и это не будет создавать 4-й столбец автоматически при добавлении еще Ли. спасибо за ваш вклад! Я думаю, что jQuery понадобится для этого – user2500750

, если вам нужна помощь с jQuery, не стесняйтесь спрашивать. – Edorka

Большое спасибо за предложение Edorka! Сначала я попробую метод Бартдуда, чтобы увидеть, работает ли он так, как мне это нужно. Если нет, могу ли я еще просить о вашей помощи? – user2500750

Вы могли бы найти некоторый интерес к this W3C recommendation о макете несколько столбцов, которые you can already use (хотя и с некоторыми префиксами) на современных браузерах.

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

источник

2013-06-19 11:43:10

Это выглядит довольно многообещающе! Я должен проверить, действительно ли это то, что мне нужно, большое спасибо! Я дам Вам знать – user2500750

список HTML разбит на несколько столбцов

ответ

Смежные вопросы