0

我有一个设计，在手机/平板电脑上，所有文本都在一个 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;.

4

1 回答 1

1

使用窗口调整大小事件：

$(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 来解决这个问题。

于 2013-08-02T14:58:54.137 回答