我想创建一个包含可变数量的 LI 元素的 UL 列表。我希望容器的高度最大为 500 像素。这意味着如果我有更多超过 500 像素高度的 li 元素,我希望它变成 2 列。如果有更多然后可以适合 2 列,我希望它变成 3 列。我有足够的空间来修复最多 5 列,并且数据永远不会超过该数量。
知道我该怎么做吗?任何 jquery,css 技巧?还是我需要处理每个场景服务器端才能执行此操作。
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
如果没有一个 UL 就无法实现,那么我对此持开放态度。
谢谢!
最佳答案
如果将每个列表封装在 <div>
中, 设置 columns
, column-width
, 或 column-count
在 <div>
, 它会将列表适本地分成几列。
编辑:它在 jsfiddle 中,但我应该澄清一下,您当前需要为这些属性使用浏览器扩展,即 -webkit-
, -moz-
, -o-
供引用:
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts
关于jquery - 一份 UL 列表拆分成固定高度的多列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13140864/