響應式“類砌體”列，不使用砌體（嘗試避免位置：絕對；）

Question

我有一個框的布局，所有框都向左浮動，當您單擊其標題時，它們會滑動打開以顯示內容。 問題是浮動方式起作用，當您單擊以展開其中之一時，它會與下面的行混淆。

http://jsfiddle.net/FCCye/ <-單擊標題之一以查看問題。

我通過將它們分成幾列來解決了這一問題：

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之間時，僅追加兩列。 所以我的想法是，在不同的尺寸下，我將不得不從列中拉出所有框，刪除列，然后根據窗口寬度以不同的數字重新添加列。 事實證明，這是一次失敗的嘗試，因此，如果有人可以向我解釋我做錯了什么，我將非常感激！

謝謝！

Answer 1

這不是您問題的答案，但是如果您遵循建議，那么您的問題將不再有意義。 ;-)首先，為什么不對不同的布局使用CSS3 Media Queries？ 那就是他們的目的。

其次，即使很多作者確實這樣做，使用像素值（或任何其他種類的絕對單位）來定義斷點也是“錯誤的做法”！ 最好只使用“ em”之類的相對單位。

您還可以選擇使用新的Flexbox模塊，具體取決於受支持的瀏覽器版本（尤其是IE 8）。

為什么不通過使用“ position：absolute”不讓擴展框簡單地與其他內容重疊呢？

嗯，使用純CSS來完成Javascript操作並不是一個好主意。 禁用JS后會發生什么？ 而且從性能的角度來看，調整視口的大小...-都不好。

因此，我的建議是完全重新考慮您的方法。