あることについて、要素（決定された）が複数あり
それをhtmlでリスト（ul li）を用い作成しようとしています。
デザインレイアウトの要件として、縦幅が決まっており、
要素は縦にならび横に折り返していくようにしたいと思っています。
こんな感じ
http://gyazo.com/fad2e629917429808a23d27e1ed1b37b
上記URLにあるような見た目をそのまま実現するだけなら、
３つのulにわけ、floatさせればできるのですが、
htmlのマークアップ上の話では、リストが３つに別れてしまい関連が弱待ってしまいます。
どうか適切な方法をおしえてください。
検証対象ブラウザは、IE7以上、他主要ブラウザ 最新バージョン
No.1
814
232
50pt
スマートではありませんが、こんな感じではいかがでしょうか。IE7(IETester)、Firefox10にて確認済み。
<ul> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> <li>77777</li> <li>88888</li> <li>99999</li> <li>00000</li> </ul>
ul{ height:80px; } li{ width:80px; height:20px; } li + li + li + li + li{ margin-top: -80px; margin-left:80px; } li + li + li + li + li + li{ margin-top: 0px; } li + li + li + li + li + li + li + li + li{ margin-top: -80px; margin-left:160px; } li + li + li + li + li + li + li + li + li + li{ margin-top: 0px; }
サンプルはこちら。http://jsfiddle.net/TkGtt/
li要素の縦横長さが固定であることが条件ですが、要素の挿入削除に耐えます。
No.2
668268
50pt
書いているうちにこされた感もあるのですが、
スクリプトで後処理するのはどうでしょう？
とりあえずこういうのがありました。
http://code.hokypoky.info/multicol/
ただ、微妙なところもあるので分割するのも書いてみました。
http://jsfiddle.net/PSzxJ/
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> .col { list-style-type: circle; margin-left: 25px; margin-right:10px; float: left; } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ var col = 3; var li = $("#example li"); var start = 0; var len = li.length; while (start < len) { //var end = start + Math.ceil(len/col); var end = start + Math.ceil((len - start) / col--); li.slice(start, end).wrapAll('<ul class="col"></ul>'); start = end; } });//]]> </script> </head> <body> <ul id="example"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> </ul> </body> </html>
No.3
247113
50pt
JavaScript を使っても大丈夫なら、はみ出してる li を新しく作った ul にしまい直す方法が使えるかもしれません。
http://jsfiddle.net/BzeSK/
li の高さが固定じゃなくても使えます。
あと、CSS の writing-mode を活用すれば JavaScript なしでも実現できたりします。
http://jsfiddle.net/2x27e/
うまくいかないブラウザが結構あるので (IE7 や Firefox など) 今回は使えないと思いますが、参考までに。
No.4
49742154
50pt
ぼくも javascript でやってみました。
http://jsfiddle.net/a_kuma3/hSW8t/
動きが分かるように、onload ではなく、ボタンを押したときに段組みをするようにしてます。
段組みの処理をした後の HTML がこんな感じになってます。
<ul id="list"> <span class="LI_CONTAINER"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </span> <span class="LI_CONTAINER"> <li>はひふへほ</li> <li>まみむめも</li> ... </ul>
LI の要素を囲んでいる SPAN は inline-block で幅を指定しました。
HTML 的には、ちょっと気持ち悪いことになってますが、段組みの処理が動いた後でも、ひとつの UL の中に LI 要素がまとまってるのがミソです。
1
21
19
コメント（0件)