Question

我正在尝试使用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>

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

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

Answer 1

您仍然可以使用类似于在F3中使用它们的推拉类。您可以阅读Foundation's doc page上的“来源订购”部分。以下是解决问题的方法：

<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，实际上没有基础方式来做到这一点，而不是我所知道的。对于解决方案，比方说，我假设你的div有一个“定义的高度”，并且高度设置为30px，你可以添加以下样式：

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

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

我可以在Foundation中使用push-pull / source命令来实现这种布局吗？

1 个答案: