1

我想实现以下布局，

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>
4

2 回答 2

3

好吧，据我所知，您可以将以下标记用于您的目的（小提琴）：

<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>
于 2013-07-26T12:23:56.130 回答
2

把所有东西放在一起.row。

这是一个演示。

于 2013-07-26T12:21:35.693 回答