これを行うには、より簡潔な方法がありますか？

私の目標は、リストの長さにかかわらず、リストを2つの列に動的にリストさせることでした。このコードがうまくいけば、あるいはこの種のものを実装するためのより簡潔なメソッドがあれば、JavaScriptやjQueryについてもっと知っている人から聞いてみたいと思います。これを行うには、より簡潔な方法がありますか？

ありがとうございます！

http://jsfiddle.net/mkimitch/ZEL5x/12/

出典

2012-01-20 Mark Kimitch

http://codereview.stackexchange.com/ –

CSS3サポートし、適切な列のサポート：http://www.quirksmode.org/css/multicolumn.html –

ウィルjQueryはCSS3以外のブラウザがコードを正しく表示するのを助けることができますか？ '：nth-child'セレクタを使ったときの動作のようなもの？ –

理由だけではなく、それらをフロート状態にしませんか？

li { 
    line-height: 1.2em; 
    position: relative; 
    float: left; 
    width: 50%; 
}

JavaScriptは必要ありません。私は何かが欠けている場合を除き...

出典

2012-01-20 19:03:09 ori

私は浮動 'li'ノードを持つ' ul'タグの特別なプロパティに関する何かを見逃しています。また、コンテナ要素の良い 'clearfix'を必ず叩くようにしてください。 http://stackoverflow.com/a/1633170/304588 –

浮かべ 'li'ノードは、次のようになり、列が生成されます：私はしようとしていたのに対し ' 1 2' '3 4' ' 5 6' '1 4' ' 2 5' '3 6' –

+1良い点.. – ori

私はそれにはjavascriptを使用しないことをお勧めします。あなたは純粋なCSSでこれを行うことができます。

ユーザーがjavascriptを無効にしている場合、コードは実行されません。

サンプル

ul.twocolumn { 
width: 400px; 
} 

ul.twocolumn li { 
width: 190px; 
float: left; 
}

Updated jsFiddle

出典

2012-01-20 19:07:11 dknaack

はい、しかし、どのように列がもはやアルファベット順に、少なくとも垂直になっていないのが分かりますか？それが私が達成しようとしていたものでした。 JavaScriptが無効になっていると、単純なリストとして表示され、実際には何も破壊されません。 –

これを行うには、より簡潔な方法がありますか？

答えて

サンプル

Updated jsFiddle

関連する問題