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

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");
    }

});

Answer 2

http://css.maxdesign.com.au/listamatic2/horizontal03.htm

你走了。