사용 가능한 공간에 따라 가로 또는 세로로 서식 지정

Question

사용 가능한 가로 공간에 따라 가로 또는 세로로 항목 목록을 렌더링하고 싶습니다. 목록 항목의 내용이 동적으로 변경 될 수 있으므로 @media 쿼리가 도움이되지 않습니다.

예 :

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

이제 우리는 muchlongeritem2- item2을 변경하고 레이아웃을 변경해야합니다

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

에만 CSS를 사용하여이를 달성 할 수있는 방법이 있나요? 자바 스크립트 솔루션을 제안 할 수는 있지만 누군가 코드를 준비했다면 기꺼이 검토해 볼 것입니다.

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

당신은 간다.