Question

我正在尝试将此布局在移动设备上作为桌面使用。可以通过复制列并使用show-for-small / large来实现，但我只想使用推/拉状态或类似的东西（所以没有重复标记）来实现它。

中型/大型：

+----------+----------+----------+----------+
| column-A | column-B | column-C | column-D |
+----------+----------+----------+----------+
|                  column-E                 |
+----------+----------+----------+----------+

小：

+----------+----------+----------+----------+
|                  column-A                 |
+----------+----------+----------+----------+
|                  column-B                 |
+----------+----------+----------+----------+
|                  column-C                 |
+----------+----------+----------+----------+
|                  column-E                 |
+----------+----------+----------+----------+
|                  column-D                 |
+----------+----------+----------+----------+

这适用于大型，但显然不适用于小型。 http://jsfiddle.net/2rmfas9r/

<div class="row">
    <div class="columns small-12 large-3">A</div>
    <div class="columns small-12 large-3">B</div>
    <div class="columns small-12 large-3">C</div>
    <div class="columns small-12 large-3">D</div>
    <div class="columns small-12">E</div>
</div>

有没有简单的方法来实现所需的布局？

Answer 1

使用基础源排序，如果不重复标记，就无法做到这一点。它仅适用于同一行上的列。

一般来说，你不能用css做到这一点，因为一列必须占据它的空间而你不知道它有多长。

如果column-E具有固定的高度，您可以将其放在position:absolute和bottom: 0上，并将padding-bottom添加到.row，等于column-E的高度。

如果您可以使用Javascript，则只需使用Foundation.utils.is_medium_up()检查您的视口，然后使用jQuery .deatch()和.append()进行column-E重新定位。

Answer 2

如果要切换E列，则需要使用 show-for-small 和 show-for-large

类

<div class="row show-for-small-only">
    <div class="columns small-12">A</div>
    <div class="columns small-12">B</div>
    <div class="columns small-12">C</div>
    <div class="columns small-12">E</div>
    <div class="columns small-12">D</div>
</div>
<div class="row show-for-large-only">
    <div class="columns large-3">A</div>
    <div class="columns large-3">B</div>
    <div class="columns large-3">C</div>
    <div class="columns large-3">D</div>
    <div class="columns large-12">E</div>
</div>

柱源订购[Zurb Foundation 5]

2 个答案: