如何固定 ul 的高度,使里面的 li 每列只显示一定的数量,多余的再另开一列?

就像 Bootstrap 的栅格系统,不过这个是垂直的

你可以了解一下CSS中的column布局。

Demo:
http://jsfiddle.net/0vom7o9k/5/

兼容性参见: http://caniuse.com/#search=column

我是来放黑魔法的,诸君一笑而过就好了…~_~ http://jsfiddle.net/0vom7o9k/2/

如果是我的话,我应该会使用jquery。先给ul一个固定的高度,高度用jquery给他一个变量。然后用FW或者审查元素看下li的高度,用ul高度-nli高度。如果nli>ul高度,就使用jquery把剩下的li分割,再用jquery把多余的li放到新的ul里。大致代码如下
var ul-height = 500px;
var li-height = 40px;
vat li-sum = $(“ul li”).length;
if(ul-height < li-height*li-sum){
再把剩余的li用warp函数放到新的ul里,注意ul要使用float:left;而且宽度要确定够多放几个ul。原谅我在饭店吃饭,无法给出全部代码,思路和大致的代码已经给你了
}

确实是黑魔法。高!不知道其它浏览器中兼容如何~

  • 现在做了个宣传用的H5需要获取openid
  • tab div中的高度计算,不使用calc()
  • vux 用了scroller 的上拉刷新,,其实用其来跳转了
  • 通过gulp-connect部署静态页面,html页面中include路径无法get!
  • 使用bootstrap table渲染json数据不显示,提示No matching records found。
  • 使用express搭建网站,能使用 es6的字符模板 完全代替其他的html语法吗(如jade)?
  • html 中如果一张图超过了屏幕大小如何自动将多出部分影藏只显示中间部分。
  • 有没有css转sass/scss及sass/scss代码格式化工具?
  • Ajax加载Json时,移动端页面向左上角缩小一截儿,加载完成后才正常显示,这该如何解决?
  • 如何检测一个FORM的整个FOCUS
  • froala 富文本编辑器不解析html代码?