使用可能なスペースに応じて水平方向または垂直方向にリストを整形する

Question

使用可能な水平スペースに応じて、アイテムのリストを水平方向または垂直方向にレンダリングしたいとします。リスト項目の内容が動的に変更される可能性があるので、@mediaクエリは本当に役立たない。

例：

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

は、今、私たちは muchlongeritem2から item2を変更し、レイアウトがに変更する必要があります。

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

あなたが行きます。