1

我正在尝试使用 CSS3 flexbox 模型对齐和自动调整大小框。

HTML && CSS：

<ul id="sect">
    <li class="">Section 1</li>
    <li class="">Section 2</li>
    <li class="">Section 3</li>
    <li class="">Section 4</li>
    <li class="">Section 5</li>
</ul>

#sect {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;    
}

#sect li {
    -webkit-flex: auto;
    flex: auto;
    display: inline-block;
    width: 193px;
    background-color: #e4e4e4;
    margin-right: 1px;
    margin-bottom: 1px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

它适用于 flexbox 模型，但仅适用于 Google Chrome： jsFiddle 示例

是否可以使用 javascript 为所有导航器（FF / Safari 和 IE8+）重现此内容？

4

1 回答 1

0

这是一个与 jquery 相同的小插件，它接受一个参数 - 单元格的最小宽度（就像你在 css 中的那个）

$.fn.resizeRows = function(minCellWidth) {
    return this.each(function () {
        //cache this ul
        thisul = $(this);
        //set defaul min cell width 193
        minCellWidth = minCellWidth|193;
        //total width of a row in pixels
        var totalwidth = thisul.width();
        //max count of cells that would fit per one row
        var maxcount = Math.floor(totalwidth/minCellWidth);
        //number of cells in the end that would require percentage width
        var endrows = thisul.find('li').length % maxcount;                

        $(this).find('li').each(function(index){
          if (index<maxcount||( thisul.find('li').length-index)>=maxcount) 
              $(this).width((totalwidth/maxcount)+'px');
          else      
              $(this).width(100/endrows + "%")
    })
})
}

您需要最初调用它并将其绑定到寡妇调整大小事件

$("#sect").resizeRows(193);
$(window).resize(function(){
    $("#sect").resizeRows(193);
});

这是修改后的jsfiddle - 我在css中注释掉了flex box，将margin-right更改为0，以便可以正确计算宽度，并将li元素设置为float：left

于 2013-06-03T09:45:03.603 回答