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

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

在这里你去。