不使用砖石的响应式“类似砖石”的列（试图避免位置：绝对；）

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

所以，我要做的是在正常的 3 列不在 480 到 768 之间时附加（因为在移动尺寸上，这些列无论如何都会堆叠在一起）并且在 480 到 768 之间时，仅追加两列。所以我的想法是，在不同的尺寸下，我必须将所有的框拉出列，删除列，然后根据窗口宽度以不同的数量重新附加列。事实证明这是一次失败的尝试，所以如果有人能向我解释我做错了什么，我将非常感激！

谢谢！

Answer 1

不是您问题的答案，但如果您遵循建议，那么您的问题将不再感兴趣。 ;-) 首先，您为什么不对不同的布局使用 CSS3 媒体查询？这就是他们的目的。

其次，使用像素值（或任何其他类型的绝对单位）来定义断点是“不好的做法”，即使很多作者确实这样做！最好只使用像“em”这样的相对单位。

新的 Flexbox 模块也可能是您的选择，具体取决于支持的浏览器版本（尤其是 IE 8）。

为什么不让展开的框不简单地通过使用“位置：绝对”与其他内容重叠？

嗯，用 Javascript 做应该用纯 CSS 做的事情不是一个好主意。当 JS 被停用时会发生什么？而且从性能的角度来看，在调整视口大小时...... - 都不好。

所以我的建议是彻底重新考虑你的方法。