8

これが私が時々遭遇する問題であり、私は通常バックエンドの観点から解決しようとしますが、フロントエンドでこれを解決するために他の人が見つけた魔法の解決策があるかどうか知りたいです。

マークアップでアルファベット順に提供されているul/liリストを、azから：

<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>

通常、アイテムを左にフロートさせて、次のように視覚的に水平にブロックで並べ替えるのは非常に簡単です。

li要素が左に浮いている1つのUL/LIリスト

ただし、次のように列を取得するには、次のようにします。

ul要素が左に浮いている4つのUL/LIリスト

私は常にHTMLを別々のエンティティ（<ul>上記の例の4つの別々の要素など）に分割する必要がありました。

CSS（JavaScriptなし）だけを使用して上の2番目の画像のような柱状の外観を取得することで、追加のマークアップなしですべてを1つのulリストに保持する方法はありますか？私の推測では「いいえ」ですが、私は以前にいくつかの魔法を見たことがあり、これにもっと明確に答えたいと思います。

4

4 に答える 4

4

まだ怖いです。

CSS3にはいくつかの優れた機能があります。たとえば、http： //www.quirksmode.org/css/multicolumn.htmlを参照してください。ただし、Internet Explorerはそれをサポートしておらず、IE9でのサポートがどのようになるかわかりません（Microsoft以外の場合現在ベータ版に存在します）

于 2011-01-04T17:22:49.880 に答える
1

CSS3マルチカラムレイアウトとそのポリフィルを使用できます：https ：//github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

于 2012-02-21T03:06:26.480 に答える
1

私は今日それを必要とし、この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

于 2014-02-24T12:35:38.153 に答える
1

あなたがそれをしているなら、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
于 2015-02-13T04:05:04.463 に答える