1

我正在尝试使用Zurb Foundation 4 Grid创建响应式布局，并且很难理解如何使用推拉式创建列布局，从而在移动设备和桌面设备中正确排序内容而无需求助到 javascript 或在“hide-for-small/hide-for-large”分类的 DIV 中复制数据。

遵循“移动优先”的理念，假设我有以下所需的活动站点布局：

移动的：

12 columns
========================
[Name / Date / Location]
[Photo                 ]
[Event details         ]
[Attendees             ]
[RSVP                  ]
[Edit link             ]

桌面：

4 columns          8 columns
=============================================
[Photo     ]    |   [Name / Date / Location ]
[RSVP      ]    |   [Event details          ]
[Edit Link ]    |   [Attendees              ]

如何格式化 HTML 以便在两种情况下都能以正确的顺序显示？

现在，我正在为移动设备执行此操作：

<!-- note: there are many ways to create this layout -
           it could be in sets of individual rows as well -->
<div class="row">
  <div class="small-12 columns">
      <div class="namedatelocation">(name/date/location html)</div>
  </div>
  <div class="small-12 columns">
      <div class="photo">(photo html)</div>
  </div>
  <div class="small-12 columns">
      <div class="details">(details html)</div>
  </div>
  <div class="small-12 columns">
      <div class="attendees">(attendees html)</div>
  </div>
  <div class="small-12 columns">
      <div class="rsvp">(rsvp html)</div>
  </div>
  <div class="small-12 columns">
      <div class="edit">(edit html)</div>
  </div>
</div>

我可以为桌面执行此操作：

<div class="row">
  <div class="large-4 columns">
      <div class="photo">(photo html)</div>
      <div class="rsvp">(rsvp html)</div>
      <div class="edit">(edit html)</div>
  </div>
  <div class="large-8 columns">
      <div class="namedatelocation">(name/date/location html)</div>
      <div class="details">(details html)</div>
      <div class="attendees">(attendees html)</div>
  </div>
</div>

如何以响应式方式创建此内容？到目前为止，我能够完成的最好的事情是将内容分成“对”并将每一对放入自己的行中，并使用推拉来更改行内 2 列的顺序。除了只能重新排序对的限制之外，这种方法的问题是每行的高度等于该行中两列中最高的列。这意味着桌面布局中有大量的死区。

关于如何完成我想做的事情的任何想法？或者在Foundation中是不可能的？如果不是，一般来说解决这个问题的正确方法是什么？

4

1 回答 1

2

您仍然可以使用类似于在 F3 中使用的 push 和 pull 类。您可以阅读Foundation 文档页面上的 Source Ordering 部分。以下是解决问题的方法：

<div class="row">
      <div class="large-8 push-4 small-12 columns">
          <div class="namedatelocation">(name/date/location html)</div>
      </div>
      <div class="large-4 pull-8 small-12 columns">
          <div class="photo">(photo html)</div>
      </div>
      <div class="large-8 push-4 small-12 columns">
          <div class="details">(details html)</div>
      </div>
        <div class="large-4 pull-8 small-12 columns rsvp">
          <div class="rsvp">(rsvp html)</div>
      </div>
      <div class="large-8 push-4 small-12 columns attendees">
          <div class="attendees">(attendees html)</div>
      </div>

      <div class="large-4 pull-8 small-12 columns">
          <div class="edit">(edit html)</div>
      </div>
    </div>

现在这是桌面版，棘手的部分是如何在移动版上展示它。请注意，我首先处理桌面，因为拉和推可以更轻松地处理您的桌面视图。要布局您的移动视图，您需要做一些 css，实际上没有 Foundation 方法可以做到这一点，这不是我所知道的。对于解决方案，例如，我假设您的 div 有一个“定义的高度”，并且高度设置为 30px，您可以添加以下样式：

.row .small-12.rsvp {
    margin-top: 30px;
}
.row .small-12.attendees {
    margin-top: -30px;
}

注意：请注意，我分别将类rsvp和添加attendees到了两个 small-12 div、第四个和第五个 div。

于 2013-03-21T02:43:44.010 回答