html - 根据可用空间水平或垂直格式化列表

Question

我想根据可用的水平空间水平或垂直呈现项目列表。列表项的内容可能会动态变化，因此@media查询并没有真正的帮助。

例子：

item1 item2 item3 item4   |<-- right border of parent box

现在我们更改item2为muchlongeritem2，布局应更改为：

item1                     |
muchlongeritem2           |<-- right border of parent box
item3                     |
item4                     |

有没有办法只使用 CSS 来实现这一点？我可以想出一个 JavaScript 解决方案，但如果有人准备好一些代码，我也很乐意检查一下。

Answer 1

我最近使用过类似的东西，这是一个片段：

$(document).ready(function () {

    // Fluid navigation helper
    var list_item = $("nav ul").children();
    var list_item_length = list_item.length;
    var list_item_width = Math.floor(978 / list_item_length);
    var left_overs = 978-(list_item_width*list_item_length);
    for (var i = 0, len = list_item.length; i < len; i++ ) {
        list_item[ i ].style.width = list_item_width+"px";
    }
    if (left_overs) {
        $("nav ul li:first-child").css("width", list_item_width+left_overs+"px");
    }

});