0

I'm trying to divide my list into multiple columns.

Example:

<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 etc

Lorem ipsum 03 Lorem ipsum 08 Lorem ipsum 13

Lorem ipsum 04 Lorem ipsum 09 Lorem ipsum 14

Lorem ipsum 05 Lorem ipsum 10 Lorem ipsum 15

This is not a problem with jquery as I have found "Easy List Splitter". However, this does not provide me with what I need.

The problem with the script of "Easy List Splitter" is that I need to put in an amount of columns. This is a problem for me because I'll be adding new items to this list weekly (if not daily) at the top of the list. It would mean I would need to edit the js file everytime.

Now that wouldn't even be a big problem (editting the amount of columns). However, some of these list items (maybe 1 out of 10) is an image link.

What I would like to accomplish is this (numbers are just examples):

  • a wrapper div with 300px height
  • each list item has a min-height of 60px
  • max. 5 items per column
  • min. 1 item per column ofcourse
  • any column (left, right or the center) should be able to have only 1 list item if that 1 list item is 300px height for example (or 2 of 150px etc)
  • must be a vertical list
  • new column automatically created on the right of the other columns

A better question is........is this possible? If new DIV's would show below/on top of eachother instead of next to eachother, the problem was solved already.

Big big thanks in advance!

If any more questions, please ask.

4

2 回答 2

0

您可能会对W3C关于多列布局的建议感兴趣，您已经可以在现代浏览器上使用（尽管有一些前缀）。

也许不完全是您想要的，但我认为这是目前解决您问题的最佳解决方案......

于 2013-06-19T11:43:10.043 回答
0

我找到的最接近的解决方案是让 LI 向左浮动并分配 33% 的宽度（对于 3 列），但在开始另一列之前它不会填充一列。CSS Indeed 并不复杂。

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

http://jsfiddle.net/cSJNm/

于 2013-06-19T11:38:01.733 回答