0

リストを複数の列に分割しようとしています。

例：

<ul class="loremipsum">
   <li><a href="#">Lorem ipsum 01</a></li>
   <li><a href="#">Lorem ipsum 02</a></li>
   <li><a href="#">Lorem ipsum 03</a></li>
   <li><a href="#">Lorem ipsum 04</a></li>
   <li><a href="#">Lorem ipsum 05</a></li>
   <li><a href="#">Lorem ipsum 06</a></li>
   <li><a href="#">Lorem ipsum 07</a></li>
   <li><a href="#">Lorem farem 08</a></li>
   <li><a href="#">Lorem ipsum 09</a></li>
   <li><a href="#">Lorem ipsum 10</a></li>
   <li><a href="#">Lorem ipsum 11</a></li>
   <li><a href="#">Lorem ipsum 12</a></li>
   <li><a href="#">Lorem ipsum 13</a></li>
   <li><a href="#">Lorem ipsum 14</a></li>
   <li><a href="#">Lorem ipsum 15</a></li>
   <li><a href="#">Lorem ipsum 16</a></li>
</ul>

Lorem ipsum 01 Lorem ipsum 06 Lorem ipsum 11 Lorem ipsum 16

Lorem ipsum 02 Lorem ipsum 07 Lorem ipsum 12 など

ロレム・イプサム 03 ロレム・イプサム 08 ロレム・イプサム 13

ロレム・イプサム 04 ロレム・イプサム 09 ロレム・イプサム 14

ロレム・イプサム 05 ロレム・イプサム 10 ロレム・イプサム 15

「Easy List Splitter」を見つけたので、これはjqueryの問題ではありません。ただし、これでは必要なものが提供されません。

「Easy List Splitter」のスクリプトの問題点は、大量の列を配置する必要があることです。リストの一番上に毎週（毎日ではないにしても）新しいアイテムをこのリストに追加するので、これは私にとって問題です. 毎回jsファイルを編集する必要があるということです。

これは大きな問題にはなりません (列の量を編集します)。ただし、これらのリスト項目の一部 (おそらく 10 個中 1 個) は画像リンクです。

私が達成したいのはこれです（数字は単なる例です）：

  • 高さ 300px のラッパー div
  • 各リスト項目の最小高さは 60px
  • 最大 列ごとに 5 項目
  • 分。もちろん、列ごとに1アイテム
  • たとえば、その 1 つのリスト項目の高さが 300px の場合 (または 150px の 2 つなど)、任意の列 (左、右、または中央) には 1 つのリスト項目のみを含めることができます。
  • 垂直リストでなければなりません
  • 他の列の右側に自動的に作成される新しい列

より良い質問は........これは可能ですか? 新しい DIV が隣同士ではなく上下に表示される場合、問題は既に解決されています。

よろしくお願いします！

さらに質問があれば、尋ねてください。

4

2 に答える 2

0

私が見つけた最も近い解決策は、LI を左にフロートさせ、33% の幅 (3 列の場合) を割り当てることですが、別の列を開始する前に列を埋めることはありません。CSS Indeed は複雑ではありません。

.loremipsum li {
    display: inline;
    float: left;
    width: 25%;
}

http://jsfiddle.net/cSJNm/

于 2013-06-19T11:38:01.733 に答える
0

この W3Cの複数列レイアウトに関する推奨事項は、最新のブラウザーで既に使用できます(ただし、いくつかのプレフィックスが付いています)。

あなたが望んでいたものとは違うかもしれませんが、これが現時点であなたの問題に対する最良の解決策だと思います...

于 2013-06-19T11:43:10.043 に答える