2

注：私は、質問を可能な限り最善の方法で表現したとは思いません。私が尋ねようとしている質問に対して誰かがより良い言い回しを持っている場合は、自由にタイトルを編集してください.

一定の高さ (および幅) を持つ div があるとします。

div の高さが増加すると、スクロール バーが表示されます。スクロールバーの代わりに、テキストを次の「列」に並べ替えたいと思います。

例：

A1          A1 A6
A2          A2 A7
A3          A3 A8
A4    =>    A4 A9 
A5          A5
- - - - - - - - - - - <-- where our fixed height is set.
A6          
A7          
A8          
A9

ありがたいことに (私はそう思います)、テキストは実際には以下のような順不同のリストです。

<ul>
 <li><a href="">A1</a></li>
 <li><a href="">A2</a></li>
 ...
</ul>

したがって、基本的には、1 列に約 16 行のテキストを含むカルーセルを作成しています。利用可能な高さで終了したらテキストを右に移動させる直接的な方法はありますか、それともJavaScriptを使用してリストを解析し、divに分割してからすべてをフロートさせる必要がありますか? テキストの最初の文字 (A、B、C ..) に基づくアンカーを使用して、左右にスクロールします。

どんな助けでも大歓迎です。ありがとう！

編集: IE8+ (おそらく IE6/7 では適切に劣化する)、Safari、Chrome、および Firefox で機能するものはありますか? 質問にさまざまなブラウザーを追加することを常に忘れています。

4

2 に答える 2

4

これは、CSS3列を使用して非常に簡単に実行できます。HTMLの例を次に示します。

<ul id = "limheight">
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
</ul>

CSS：

#limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
    display: inline-block; /*necessary*/
}

そして少しのデモ：少しのリンク。

お役に立てば幸いです。

于 2012-08-25T08:52:00.940 に答える
0

私があなたを正しく理解したかどうかはわかりませんが、CSSには便利な列プロパティがあります。ここでそれについてもっと読む：

http://www.w3schools.com/css3/css3_multiple_columns.asp

注：<= IE9では機能しないため、注意してください。

于 2012-08-25T08:52:45.150 に答える