html - 调整窗口大小时将 div 从另一个下方移动到上方

Question

我有两个 div，A 和 B。B 在 A 下。当我将窗口垂直调整到足够窄时，是否可以将它放在 A 之上？这可以通过根据大小隐藏/显示 div 来模拟吗？

Answer 1

您所说的问题被广泛称为响应式设计。

下面显示了演示可能解决您的问题的示例代码。它在元素上使用resize事件window，然后根据实际窗口宽度隐藏所选元素。该redesign方法最终应该包含任何适当的逻辑，根据实际宽度设计视图：

$(document).ready(function () {
    redesign();
    $(window).resize(function(){
        redesign();
    });
});

function redesign(){
    if ($(window).width() < 640) {
        $("#divA").hide();
    }else{
        $("#divA").show();
    }
}

查看jsFiddle示例（显然调整窗口大小以查看一些结果）。如果您对移动 DOM 元素之间的关系感兴趣，请检查 jquery insertBefore方法。