Сортировка html ul/li list в алфавитном вертикальном блоке

Question

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

Учитывая список уль/li, если в разметке в алфавитном порядке, от А до Я:

<ul> 
    <li>Alpha</li> 
    <li>Bravo</li> 
    <li>Charlie</li> 
    <li>Delta</li> 
    <li>Echo</li> 
    <li>Foxtrot</li> 
    <li>Golf</li> 
    <li>Hotel</li> 
    <li>India</li> 
    <li>Juliet</li> 
    <li>Kilo</li> 
    <li>Lima</li> 
    <li>Mike</li> 
    <li>November</li> 
    <li>Oscar</li> 
    <li>Papa</li> 
    <li>Quebec</li> 
    <li>Romeo</li> 
    <li>Sierra</li> 
    <li>Tango</li> 
    <li>Uniform</li> 
    <li>Victor</li> 
    <li>Whiskey</li> 
    <li>X-ray</li> 
    <li>Yankee</li> 
    <li>Zulu</li> 
</ul> 

Как правило, это очень легко всплывают детали слева и сортировать их визуально по горизонтали в блоках, как, например:

Однако, чтобы получить столбцы, например:

Мне всегда приходилось разбивать HTML на отдельные объекты, такие как четыре отдельных элемента <ul> в приведенном выше примере.

Есть ли способ сохранить все в одном списке без дополнительной разметки, используя только CSS (без JavaScript), чтобы получить столбчатый вид, как второе изображение выше? Мое предположение - «нет», но я уже видел волшебство, и я хотел бы ответить на это более окончательно.

Answer 1

Еще нет, я боюсь.

CSS3 имеет некоторые полезные свойства, смотри, например http://www.quirksmode.org/css/multicolumn.html, но Internet Explorer не поддерживает его, и я не знаю, как поддержка в IE9 будет (по Microsoft несуществующих в бета на данный момент)

Answer 2

Вы можете использовать многострочные макеты CSS3 и его полипол: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

Answer 3

Мне это было нужно сегодня и написал этот эквивалент python. Вы можете писать с помощью встроенного javascript.

# -*- coding: utf8 -*- 
import math 
# --------------------- EDIT THIS PART 
#define columns 
c = 4 
# you can define to alphabetical list here 
# i used to numbers, because range func. very effective for testing 
list = range(1, 26, 1) 
# ---------------------- END OF EDIT 
# firstly sort 

list = sorted(list) 

# calculate total row 
r = int(math.ceil(len(list)/c)) + (1 if len(list) % c is not 0 else 0) 

index = 0 
table1 = [] 
for x in range(c): 
    table1.append([]) 
    for y in range(r): 
     if len(list) > index: 
      table1[x].append(y) 
      table1[x][y] = list[index] 
      index += 1 


res = '' 
for i in range(r): 
    for x in table1: 
     try: 
      #print x[i] 
      res += "%s\t|\t" % x[i] 
     except IndexError: 
      res += "%s\t|\t" % "_" 
      pass 
    res += "\n" 

#print table1 
print res 

https://github.com/berkantaydin/vertical-alphabetical-sorting-with-columns

Answer 4

Если вы делаете это в PHP вы можете использовать простой счетчик и %. Я сумел сделать это в WordPress получить список пользовательских таксономий так:

<div class="row gutters"> 

    <?php $taxos = get_categories (array('taxonomy' => 'make')); ?> 

    <?php $count = 0; ?> 

    <div class="col col_2"> 

     <ul> 

      <?php foreach($taxos as $tax) : ?> 

       <li><a href="/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li> 

       <?php $count++; ?> 

       <?php if($count % 5 == 0) echo '</div></ul><div class="col col_2"><ul>'; ?> 

      <?php endforeach; ?> 

     </ul> 

    </div> 

</div> 

Вы также можете перебрать массив и получение идеальным то же самое. Вывод выглядит примерно так:

a f 
b g 
c h 
d i 
e j