Question

我有一个设计，在手机/平板电脑上，所有文字都在一个div中，但在“桌面”上时，p标签移动到它下面的div。（所有div都有不同的背景图像）。

这是标记 -

<main>
    <div class="pane">
        <h2>A thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>Another thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>A third thing</h2> 
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>A fourth thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>The last thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
</main>

演示：http://codepen.io/sturobson/pen/aCqDc

因此，当页面达到48em（768px）时，<p>中的.pane需要下拉到以下.pane-details

如何在不重复内容的情况下执行此操作并巧妙地使用display: none;。

Answer 1

使用window resize event：

$(window).on('resize'), function() {
    if ($(window).width()<768) {
        // move the element
    } else {
        // move it back
    };
}).trigger('resize'); // force it to run on load

但是，如果重新考虑HTML布局，可以用纯CSS解决这个问题。

将内容移动到页面调整大小上的不同div

1 个答案: