Автоматическое создание столбцов с использованием одного простого списка

Я пытаюсь написать гибкий код, в котором у меня есть один простой <ul>, который автоматически создает другой столбец для каждого 5-го элемента. Я нашел руководство, в котором это достигается, но местами элементы в горизонтальном порядке, тогда как мне нужен вертикальный порядок. Я видел некоторые другие учебники, которые выводят вертикальный порядок, но также прикрепляют class="first" и class="second" к каждому li, чего я не хочу. Я хочу сделать с моим существующим HTML-кодом.

Что я хочу:

-01     -06     -11   
-02     -07     -12
-03     -08     -13
-04     -09     -14
-05     -10     -15

Что я имею:

-01     -02     -03   
-04     -05     -06
-07     -08     -09
-10     -11     -12
-13     -14     -15

CSS:

ul {
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
}

li {   
    float:left;
    display:inline;
}

.double li  { width:50.0%; } /* 2 col */
.triple li  { width:33.3%; } /* 3 col */
.quad li    { width:25.0%; } /* 4 col */
.six li     { width:16.6%; } /* 6 col */

HTML:

<ul class="triple">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

person Jon    schedule 06.09.2012    source источник
comment
Если вам нужно поддерживать IE, вам придется использовать JavaScript или изменить разметку. В противном случае вы можете использовать :nth-child(5n) и тому подобное.   -  person Eric    schedule 06.09.2012
comment
JavaScript, безусловно, вариант. Я могу изменить свой HTML, если я не добавляю какие-либо классы/разделы внутри самого ul. Я посмотрю на :nth-child().   -  person Jon    schedule 06.09.2012
comment
Я думаю, что JavaScript был бы лучшим тегом, чем динамический здесь...   -  person Eric    schedule 06.09.2012
comment
Как бы вы сделали это с помощью JavaScript? Извините, мой JS не настолько продвинут.   -  person Jon    schedule 07.09.2012


Ответы (2)


Вы можете использовать этот код:

ul
{
    -webkit-column-count: 4; -webkit-column-gap:20px;
    -moz-column-count:4; -moz-column-gap:20px;
    -o-column-count:4; -o-column-gap:20px;
    column-count:4; column-gap:20px;
}

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

Вот jsFiddle, чтобы поиграть с ним: http://jsfiddle.net/leniel/nRL4R/

person Leniel Maccaferri    schedule 06.09.2012
comment
Мне нравится решение, но, к сожалению, глупый IE его не поддерживает. - person Jon; 06.09.2012
comment
Да... это очень чистое решение. Вам просто нужно применить ul стили и убрать все остальные. IE действительно плохой парень, когда дело доходит до применения свойств CSS. :) - person Leniel Maccaferri; 06.09.2012
comment
Хм... Я продолжу искать другое решение, совместимое с IE, но я буду использовать это как запасной вариант. - person Jon; 06.09.2012

http://codepen.io/anon/pen/iDzmq

Это единственный известный мне способ сделать это. просто в коде, который вы используете для отображения списков, установите его для добавления ul.sub каждый 5-й li

Любые вопросы?

person Jack Sharpe    schedule 06.09.2012
comment
Я не хочу добавлять <ul class="sub"> для каждого 5-го элемента. Я собираюсь работать с большим количеством элементов и время от времени вводить несколько дополнительных элементов в случайных местах. Жесткое кодирование того, какой столбец каждого элемента входит в мой список, сделает мой код чрезвычайно трудным для поддержки в будущем. - person Jon; 06.09.2012
comment
Какой код вы используете, потому что это всегда может быть простой случай цикла, который будет принимать все значения в массиве, а затем обрабатывать их со счетом, который добавит пользовательский класс к 5-му элементу. если вы используете PHP, я могу довольно быстро написать вам что-нибудь - person Jack Sharpe; 20.09.2012