0

利用可能な水平スペースに応じて、アイテムのリストを水平または垂直にレンダリングしたいと思います。リスト項目の内容は動的に変化する可能性があるため、@mediaクエリはあまり役に立ちません。

例：

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

次に、レイアウトを次のように変更しますitem2。muchlongeritem2

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

CSSのみを使用してこれを達成する方法はありますか? 私は JavaScript の解決策を考え出すことができましたが、誰かがコードを用意していれば、喜んでそれを調べてみたいと思います。

4

1 に答える 1

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

});
于 2012-05-05T14:57:47.667 に答える