2

ボックスのレイアウトはすべて左に浮いており、見出しをクリックすると、スライドしてコンテンツが表示されます。問題は、フロートが機能する方法です。フロートの 1 つをクリックして展開すると、その下の行が乱れます。

http://jsfiddle.net/FCCye/ <-- 見出しの 1 つをクリックして問題を確認します。

次のように列に分割することでこれを解決しました。

http://jsfiddle.net/caW4M/

それは問題なく動作しますが、レイアウトはレスポンシブである必要があるため、ウィンドウが 480 以下の場合は 1 列にする必要があります。480 から 768 の間は 2 列にする必要があります。768 を超えるもの、3 列。(明らかに、jsfiddles は私が設定したブレークポイントを表示しません。)

これは私がこれを解決するために思いついたコードですが、まったく機能していません。誰かが私が間違っていることを教えてくれるかどうか疑問に思っていました。

// Create all three portfolio columns
    var one = $('<div/>').addClass('column').addClass('one');
    var two = $('<div/>').addClass('column').addClass('two');
    var three = $('<div/>').addClass('column').addClass('three');

    // Store all portfolio elements into variables once they're in columns
    var colElems = $('.column .project');

    // Now append the columns
    var winWidth = $(window).width();
    if ( winWidth > 480 && winWidth <= 768 ) {

        // Remove everything from columns and delete existing columns
        $(colElems).appendTo('#portfolio .content');
        $('#portfolio .content').remove(one,two,three);

        // Store portfolio elements into variables for safe-keeping
        var c1Elems = $('.project:nth-child(2n+1)');
        var c2Elems = $('.project:nth-child(2n+2)');

        // Perform appends into portfolio columns
        c1Elems.appendTo(one);
        c2Elems.appendTo(two);

        // Append portfolio elements to columns     
        $('#portfolio .content').append(one,two);

    }else{

        // Remove everything from columns and delete existing columns
        $(colElems).appendTo('#portfolio .content');
        $('#portfolio .content').remove(one,two,three);

        // Store portfolio elements into variables for safe-keeping
        var c1Elems = $('.project:nth-child(3n+1)');
        var c2Elems = $('.project:nth-child(3n+2)');
        var c3Elems = $('.project:nth-child(3n+3)');

        // Perform appends into portfolio columns
        c1Elems.appendTo(one);
        c2Elems.appendTo(two);
        c3Elems.appendTo(three);

        $('#portfolio .content').append(one,two,three); 
    }

したがって、私がやろうとしているのは、480 から 768 の間でない場合は通常の 3 列を追加することです (モバイル サイズでは、列はとにかく互いに積み重ねられるため)。480 から 768 の間の場合は、2 つの列のみを追加します。 . したがって、サイズが異なると、すべてのボックスを列から引き出し、列を削除し、ウィンドウの幅に基づいて異なる数で列を再追加する必要があると思います。これは失敗した試みであることが証明されているので、誰かが私が間違っていることを説明できるなら、私は非常に感謝しています!

ありがとう！

4

1 に答える 1

0

あなたの質問への回答ではありませんが、アドバイスに従えば、あなたの質問には興味がなくなります。;-) まず、さまざまなレイアウトに CSS3 Media Query を使用しないのはなぜですか? それが彼らの目的です。

第 2 に、ブレークポイントを定義するためにピクセル値 (またはその他の種類の絶対単位) を使用することは、多くの作成者が実際に使用している場合でも、「悪い習慣」です! 「em」などの相対単位のみを使用することをお勧めします。

サポートされているブラウザーのバージョン (特に IE 8) によっては、新しい Flexbox モジュールもオプションになる可能性があります。

そして、'position: absolute' を使用して、展開されたボックスが単に他のコンテンツと重ならないようにしてください。

まあ、純粋な CSS で行うべきことを Javascript で行うのは得策ではありません。JS を無効にするとどうなりますか? また、パフォーマンスの観点から、ビューポートのサイズを変更すると... -すべて悪いです。

したがって、私のアドバイスは、アプローチを完全に再考することです。

于 2013-08-31T14:01:15.693 に答える