响应式“类砌体”列，不使用砌体（尝试避免位置：绝对；）

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后会发生什么？ 而且从性能的角度来看，调整视口的大小...-都不好。

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