0

私はフロートの振る舞いを知っています。次の行に移動する必要がある場合、次のブロックの上部は前のブロックの下部よりも高くする必要があります。ただし、前のレベルから最初のブロックにフロートする必要があります。

現在、さまざまなサイズのリストを持つ非常に大きなメニューで作業しており、フロートのために多くの空白が発生しています。これを解決するには、CSS/HTML ベースの簡単な方法が必要です。

私が何について話しているのかわからない場合は、ここにフィドルがあります: http://jsfiddle.net/2EGbx/1/

ご覧のとおり、fiveは一番下まであり、その下に多くの空白が残っていますone。私はfive下に行く必要がありますone。

私はしばらくグーグルで検索してきましたが、これに関する解決策が本当に見つかりません。CSSで処理できると確信しているので、JavaScriptソリューションは使用したくありませんが、それが本当に唯一の方法である場合は、遠慮なく提案してください。

4

4 に答える 4

0

独自の JavaScript ソリューションを作成しました。

このスクリプトは 4 つの列を作成し、リスト アイテムを最小の列に配置してから、次の列に進みます。これは私が見つけた最も効率的な方法です\

function reformatMenu()
{
    jQuery("#mainmenu td").each(function(index, elem)
    {
        jQuery("body").append('<div id="tempwrap"></div>');
        var $tempWrapper = jQuery("body").find("#tempwrap");
        var $menuwrapper = jQuery(this).find(".subwrapper");
        $tempWrapper.append('<div class="menu_wrapper"><ul></ul></div><div class="menu_wrapper"><ul></ul></div><div class="menu_wrapper"><ul></ul></div><div class="menu_wrapper"><ul></ul></div>');

        $menuwrapper.find("li.level-2").each(function(index, elem)
        {
            var $smallestWrapper = $tempWrapper.find(".menu_wrapper").first();
            $tempWrapper.find(".menu_wrapper").each(function(index, elem)
            {
                if(jQuery(this).height() < $smallestWrapper.height())
                {
                    $smallestWrapper = jQuery(this);
                }
            });
            jQuery(this).appendTo($smallestWrapper.children("ul"));
        });

        $tempWrapper.children().appendTo($menuwrapper);
    });
}
reformatMenu();

もっと効率的にできると確信していますが、これは私の最初のアイデアであり、完全に機能します。

于 2013-08-13T08:29:59.653 に答える
0

ウェブサイトがレスポンシブでない場合は、これらの各要素に固定の高さを与えれば問題ありません。レスポンシブであっても、これは垂直方向のものであり、ほとんどの場合同じままになると思います. ただし、正しい方法で実行したい場合は、フロートをまったく使用しないでください。それはあなたが望むものではありません...display: inline-block;またはインラインまたはブロックを使用して回避する必要があります...

于 2013-08-12T13:52:44.470 に答える