一个UL列表拆分为固定高度的多列 [英] One UL list split into multi columns with fixed height

问题描述

我想创建一个包含可变数量LI元素的UL列表。我希望容器的高度最大为500px。这意味着如果我有更多的li元素超过500px的高度，我希望它变成2列。如果有更多的话可以适合2列，我希望它变成3列。我有足够的空间来修复最多5列，数据永远不会超过这个数量。

任何想法我能做到这一点？任何jQuery的，CSS的技巧？或者我是否需要处理每个场景服务器端来执行此操作。

 示例1 
 
列表条目列表条目
列表条目列表条目
列表条目列表条目
列表条目列表条目
列表条目
 
 
示例2 
列表条目列表条目列表条目
列表条目列表条目列表条目
列表条目列表条目列表条目
列表条目列表条目
列表条目列表条目
 
 
示例3 
列表条目列表条目列表条目列表条目
列表条目列表条目列表条目列表条目
列表条目列表条目列表条目列表条目
列表条目列表条目列表条目
列表条目列表条目列表条目
  

如果没有一个UL就无法实现，

谢谢！

解决方案

http://jsfiddle.net/eaewX/1/

如果将每个列表封装在< div> 中，则设置列，<$ c $在< div> > c>列宽或列数将其列入适当的列。

编辑：这是在jsfiddle中，但我应该澄清你目前需要使用浏览器扩展这些属性，即 -webkit - ， -moz - ， -o -

供参考：

https://developer.mozilla.org/zh-CN/docs/CSS/Using_CSS_multi-column_layouts

http://dev.w3.org/csswg/css3-multicol /＃栏

I would like to create one UL list that will contain a variable number of LI elements. I would like the heigh of the container to be max 500px. Which means if i have more li elements that go over that 500px height i want it to turn into 2 columns. If there is more then can fit for 2 columns i would like it to turn into 3 columns. I have enough space to fix max 5 columns and the data will never go over that amount.

Any idea how i can do this? Any jquery, css tricks? or do i need to handle each scenario server side to do this.

Example 1

    list entry    list entry 
    list entry    list entry
    list entry    list entry
    list entry    list entry
    list entry    


 Example 2
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry
    list entry    list entry


 Example 3
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry

If it cant be achieved without one UL then i am open to that.

Thanks!

解决方案

http://jsfiddle.net/eaewX/1/

If you encapsulate each list in a <div>, setting columns, column-width, or column-count on <div>, it will break the list into columns appropriately.

edit: It is in the jsfiddle, but I should clarify you'll need to use browser extensions for these properties currently, i.e. -webkit-, -moz-, -o-

For reference:

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

http://dev.w3.org/csswg/css3-multicol/#columns

这篇关于一个UL列表拆分为固定高度的多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！