搜尋

首頁  >  問答  >  主體

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

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

PHP中文网PHP中文网2867 天前924

全部回覆(4)我來回復

  • PHP中文网

    PHP中文网2017-04-17 11:25:37

    你可以了解CSS中的column版面。

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

    相容性請參考: http://caniuse.com/#search=column

    回覆
    0
  • 怪我咯

    怪我咯2017-04-17 11:25:37

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

    回覆
    0
  • PHPz

    PHPz2017-04-17 11:25:37

    如果是我的話,我應該會使用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。原諒我在飯店吃飯,無法給出全部程式碼,思路和大致的程式碼已經給你了
    }

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 11:25:37

    確實是黑魔法。高!不知道其它瀏覽器中相容如何~

    回覆
    0
  • 取消回覆