Question

我正在开发一个响应式网站，虽然我无法真正改变HTML，只有CSS和JS。

我有一个灯具网格，当屏幕尺寸达到480px时，我想将div移动到另一个div之下。

要查看问题，请查看此演示我设置http://jsfiddle.net/FyXRU/

我的代码是

<div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>

<hr>

<div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>

<hr>

<div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>

<hr>

<div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>



$(window).resize(function() { //Fires when window is resized
    iTargetWidth = $(window).width();

    if (iTargetWidth < 770) { 
        $("div.fixture-date").insertAfter("div.teams");
    }
});

在团队div之后移动日期之后的事情。

任何帮助都会很棒。

Answer 1

尝试这样的事情：

$(window).resize(function() { //Fires when window is resized
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width <= 770) {
        $(".fixture").each(function() {
        var detach = $(this).find(".fixture-date").detach();
        $(detach).insertAfter($(this).find(".teams"));
        })
    }
});

example

根据屏幕大小交换div

1 个答案: