Question

我正在使用zurb foundation 4框架。对我来说，以下测试站点在桌面视图上看起来很好。在桌面视图中，我在左侧：大7列（灰色内容文本框）;在右侧：我有：大5列（图像1绿色和图像2蓝色）。请帮我准确的代码示例。在平板电脑和手机视图上，我想重新排列div列的顺序为：首先是图像1绿色框，然后是灰色内容文本框下面，然后是图像2蓝色框。请帮我准确的代码示例。非常感谢你！

以下是我目前的预览：http://www.endsnore.com/_test1/marketing5.html

以下是我希望在平板电脑和手机视图中发生的示例：http://www.endsnore.com/_test1/images/_delete14.jpg

Answer 1

如果没有做一些jquery或javascript，你就不能拥有那个布局。没有内置的css解决方案，甚至没有来自Foundation的javascript可以帮到你。

您可以尝试此解决方案。首先，你需要有这样的布局：

   <div class="row">
        <div class="small-12 columns show-for-small" id="topContent"></div>
        <div class="large-7 small-12 columns panel">1st column</div>
        <div class="large-5 small-12 columns panel">
            <div id="img1" class="panel">img1</div>
            <div id="img2" class="panel">img2</div>
        </div>
    </div>

然后让这个脚本将第一张图片移到最上面：

$(document).foundation();
$(function () {         
        var wd = $(window).width();
        if (wd < 768) {
            $("#topContent").append($("#img1").detach());
        }        
});

请注意，该脚本仅适用于页面的加载，而不适用于调整浏览器的大小 - 我认为无论如何你都不需要这样做。但无论出于何种原因，只需将“宽度”逻辑包含在调整大小函数中，例如：

$(window).resize(function () {
            var wd = $(window).width();
            if (wd < 768) {
                $("#topContent").append($("#img1").detach());
            } 
});

根据设备平板电脑或手机重新排列div列的顺序。 zurb基金会4

1 个答案: