jquery - 如何在列中设置多个列表的样式？

Question

我有 x 个无序列表 ()。

我现在 2 列的工作解决方案是:

<div class="catalog_menu_widget">
<ul>
    <li>LOREM IPSUM</li>
    <li>LOREM IPSUM</li>
    <li>LOREM IPSUM</li>
    <li>LOREM IPSUM</li>
</ul>
<ul>
    <li>LOREM IPSUM</li>
    <li>LOREM IPSUM</li>
    <li>LOREM IPSUM</li>
</ul>
</div>

.catalog_menu_widget {
    width: 820px;
    padding: 10px;
    background: #e4e8fe;
    float: left;
}

.catalog_menu_widget ul {
    width: 410px;
    float: left;
}

.catalog_menu_widget li {
    line-height: 25px;
}

.catalog_menu_widget a {
    font-size: 14px;
    color: #003769; 
    text-transform: uppercase;
    /*font-weight: bold;*/
}

现在我的问题是，要实现灵活的多列布局，我需要哪种 css 样式？ 3 个 UL 以 3 列显示，4 个 UL 以 4 列显示，... 我已经在谷歌上搜索过了，但大多数解决方案都是 CSS3 或仅适用于 2 列，我们只想支持 IE8(没有 CSS3)，而且重要的是标记(多个 UL)是先决条件并且可以'被感动。

预先感谢您的帮助!

编辑:

解决方案:

var width = 100 / jQuery('.catalog_menu_widget ul').length;
jQuery('.catalog_menu_widget ul').css({width: width + '%'});

Answer 1

在标记 jquery 时，试试这个:

$(document).ready(function(){
    var $width = 100 / $('.catalog_menu_widget ul').length;
    $('.catalog_menu_widget ul').css({width: $width + '%'});
})

FIDDLE