qlzyu回答ポイント 200pt

html のコーディングについての質問です。

あることについて、要素（決定された）が複数あり
それをhtmlでリスト（ul li）を用い作成しようとしています。
デザインレイアウトの要件として、縦幅が決まっており、
要素は縦にならび横に折り返していくようにしたいと思っています。

こんな感じ
http://gyazo.com/fad2e629917429808a23d27e1ed1b37b

上記URLにあるような見た目をそのまま実現するだけなら、
３つのulにわけ、floatさせればできるのですが、
htmlのマークアップ上の話では、リストが３つに別れてしまい関連が弱待ってしまいます。

どうか適切な方法をおしえてください。

検証対象ブラウザは、IE7以上、他主要ブラウザ最新バージョン

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

Lhankor_Mhy2012/03/13 13:12:44
満足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要素の縦横長さが固定であることが条件ですが、要素の挿入削除に耐えます。

スター

TransFreeBSD2012/03/13 13:32:25
満足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>

スター

📦⛰️2012/03/13 15:20:07
満足50pt

JavaScript を使っても大丈夫なら、はみ出してる li を新しく作った ul にしまい直す方法が使えるかもしれません。
http://jsfiddle.net/BzeSK/
li の高さが固定じゃなくても使えます。

あと、CSS の writing-mode を活用すれば JavaScript なしでも実現できたりします。
http://jsfiddle.net/2x27e/
うまくいかないブラウザが結構あるので (IE7 や Firefox など) 今回は使えないと思いますが、参考までに。

スター

a-kuma32012/03/19 14:19:23
満足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 要素がまとまってるのがミソです。

スター

その他の回答を読む

この質問へのコメント

コメントはありません

この質問への反応（ブックマークコメント）

質問の情報

登録日時: 2012-03-12 18:39:38
終了日時: 2012-03-19 18:40:15
回答条件: 1人5回まで

html のコーディングについての質問です。

みんなの回答

Lhankor_Mhy2012/03/13 13:12:44
満足50pt

TransFreeBSD2012/03/13 13:32:25
満足50pt

📦⛰️2012/03/13 15:20:07
満足50pt

a-kuma32012/03/19 14:19:23
満足50pt

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

html のコーディングについての質問です。

みんなの回答

Lhankor_Mhy2012/03/13 13:12:44 満足50pt

TransFreeBSD2012/03/13 13:32:25 満足50pt

📦⛰️2012/03/13 15:20:07 満足50pt

a-kuma32012/03/19 14:19:23 満足50pt

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

Lhankor_Mhy2012/03/13 13:12:44
満足50pt

TransFreeBSD2012/03/13 13:32:25
満足50pt

📦⛰️2012/03/13 15:20:07
満足50pt

a-kuma32012/03/19 14:19:23
満足50pt