根據可用空間水平或垂直格式列表

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

在這裏你去。