Как изменить ориентацию <ul>, охватывающего несколько столбцов? - PullRequest
Новая
       7

Как изменить ориентацию <ul>, охватывающего несколько столбцов?

4 голосов
/ 02 июня 2011

Я создаю <ul> отсортированных по алфавиту предметов, которые занимают несколько строк.Пример этого можно увидеть здесь:

http://jsfiddle.net/H4FPw/1/

В настоящее время список выложен по горизонтали следующим образом: 

a  b  c

d  e  f

g  h  i

j  k  l

Но клиенты, являющиеся клиентами, яТеперь меня попросили изменить это так, чтобы список был вертикально ориентирован, как показано ниже: 

a  e  i

b  f  j

c  g  k

d  h  l

К сожалению, я не знаю, как сделать это так хорошо и аккуратно, как я это делал изначально.

Может кто-нибудь, пожалуйста, напишите мне, если это возможно сделать с одним <ul> и CSS?Или мне нужно составить несколько списков?

Ответы [ 4 ]

5 голосов
/ 03 июня 2011

Вам не нужно использовать несколько списков, только математические матриц.

Я сделал здесь укол, так как изначально он расположен в алфавитном порядке по горизонтали, а строки и столбцы известны, его можно преобразовать с помощью jQuery.

http://jsfiddle.net/H4FPw/12/

Редактировать: О да, я добавил атрибут id="place" к <ul>.

2 голосов
/ 02 июня 2011

Вы не можете сделать это, только изменив CSS.

Что ж, вы можете, если вам наплевать на IE: http://caniuse.com/#search=multiple%20column

Вы должны пойти на компромисс:

  • Разделите <ul> на три <ul> s вручную.
  • Как подсказал @PeeHaa, используйте код на стороне сервера, чтобы изменить порядок , который<li> s выводятся (но все еще хранят их внутри одного <ul>).
  • Используйте JavaScript для изменения порядка <li> s.Я сделал это, используя jQuery здесь , но, вероятно, было бы более целесообразно использовать такой плагин: http://welcome.totheinter.net/columnizer-jquery-plugin/
0 голосов
/ 13 февраля 2015

Если вы делаете это в 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
0 голосов
/ 02 июня 2011

Я бы использовал CSS3 столбцы или JavaScript. IDK, если это возможно с помощью CSS2.

...