IE Alternative to Column-Count & Column-Gap

前端 未结 4 1170
一整个雨季
一整个雨季 2020-12-05 08:14

I am wondering if there is an IE alternative to using column-count and column-gap?

I have made this post about creating a list that automat

4条回答
  •  谎友^
    谎友^ (楼主)
    2020-12-05 08:25

    Here is solution how to make menu with multicolumns which looks the same as the one created with column-count property and works in ALL BROWSERS.

    This is done with floating elements, but the trick here is to re-order the elements in javascript (or server side) so they natural flow looks as up-down instead left-right

    Item1 Item4 Item7

    Item2 Item5 Item8

    Item3 Item6

    Example: http://jsfiddle.net/xrd5Y/16/

    // number of columns
    var columns = 4;
    
    var $ul = $('ul.multicolumn'),
        $elements = $ul.children('li'),
        breakPoint = Math.ceil($elements.length/columns);
        $ordered = $('
    '); function appendToUL(i) { if ($ul.children().eq(i).length > 0) { $ordered.append($ul.children().eq(i).clone()); } else $ordered.append($('
  • ')); } function reorder($el) { $el.each(function(){ $item = $(this); if ($item.index() >= breakPoint) return false; appendToUL($item.index()); for (var i = 1; i < columns; i++) { appendToUL(breakPoint*i+$item.index()); } }); $ul.html($ordered.children().css('width',100/columns+'%')); } reorder($elements);

提交回复
热议问题