Question

我使用的是基金会5，我试图在移动设备屏幕上实现以下DIV布局：

--------------------
|        A         |
--------------------
|        B         |
--------------------
|        C         |
--------------------
|        D         |
--------------------
|        E         |
--------------------

我想这样在桌面屏幕上显示如下：

--------------------------------
|                              |
|              A               |
|                              |
--------------------------------
|                  |           |
|        B         |           |
|                  |           |
--------------------     E     |
|                  |           |
|        C         |           |
|                  |           |
--------------------------------
|                              |
|              D               |
|                              |
--------------------------------

有人知道怎么做吗？

目前我有三排：一排为A，一排为B，C＆amp; E和一个D.我一直在尝试按下并重新排序D＆amp; E在移动视图中，但我似乎无法做到这一点，因为它们位于不同的行中。

请注意，DIV的内容是动态的，因此我无法使用绝对定位在移动设备上切换DIV。

非常感谢提前。

Answer 1

一个选项是要加载一个普通的网页，如果桌面加载你的网页，下面的html代码将达到你所需要的。

<div class="row">
    <div class="large-12 columns">
        A
    </div>
</div>

<div class="row">
    <div class="large-x columns">
        <div class="row">
            <div class = "large-12 columns">
                B
            </div>
        </div>
        <div class="row">
            <div class = "large-12 columns">
                C
            </div>
        </div>

    <div class="large-(12-x) columns">
        E
    </div>
</div>

<div class="row">
    <div class = "large-12 columns">
        D
    </div>
</div>

如果您需要根据移动设备访问该页面的情况进行更改，则需要一个脚本来检测该页面。我建议调查一下userAgent。使用userAgent检测此here已经存在问题。一旦您收到移动浏览器确实正在访问的信号，您就可以使用简单的jQuery命令来动态操作DOM。

Answer 2

使用foundation.css执行此操作的唯一方法是根据屏幕大小隐藏和显示div-E

<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
    <div class="small-12 columns">
        A
    </div>
</div>

<div class="row">
    <div class="small-12 medium-8 columns">
        <div class="row">
            <div class = "small-12 columns">
                B
            </div>
        </div>
        <div class="row">
            <div class = "small-12 columns">
                C
            </div>
        </div>
    </div>
    <div class="small-12 medium-4 hide-for-small columns">
        E
    </div>
</div>

<div class="row">
    <div class = "small-12 columns">
        D
    </div>
</div>
  <div class="row">
<div class="small-12 medium-4 show-for-small columns">
        E
</div>  
    </div>

基础5网格推拉

2 个答案: