Question

我想实现以下布局，

Desktop:
[----A---][-B-]
[-C-][-D-][-E-]

Mobile:
[----- A -----]
[---B--][--C--]
[---D--][--E--]

我可以让'B'跳到移动版本的新行并占用一半的空间，但我不能让它与'C'分享 - 这是发生的事情：

[----- A -----]
       [---B--]
[--C--][---D--]
       [---E--]

如何实现所需的布局？我正在使用Zurb Foundation 4框架。

标记如下

<div class="row">
  <div class="large-8 small-12 columns">
    A
  </div>
  <div class="large-4 small-6 columns">
    B
  </div>
</div>

<div class="row">
  <div class="large-4 small-6 columns">
    C
  </div>
  <div class="large-4 small-6 columns">
    D
  </div>
  <div class="large-4 small-6 columns">
    E
  </div>
</div>

Answer 1

据我所知，您可以使用以下标记（fiddle）：

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

Answer 2

将所有内容放在一个.row。

Here's a demo

如何使用Zurb Foundation 4填充网格行？

2 个答案: