人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

●質問者: qlzyu
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Lhankor_Mhy
●50ポイント

スマートではありませんが、こんな感じではいかがでしょうか。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要素の縦横長さが固定であることが条件ですが、要素の挿入削除に耐えます。


2 ● TransFreeBSD
●50ポイント

書いているうちにこされた感もあるのですが、
スクリプトで後処理するのはどうでしょう?
とりあえずこういうのがありました。
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>

3 ● ぱこち
●50ポイント

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

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


4 ● a-kuma3
●50ポイント

ぼくも 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 要素がまとまってるのがミソです。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ