我想实现以下布局,
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>
最佳答案
据我所知,您可以根据自己的目的使用以下标记 ( 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>
关于javascript - 如何使用 Zurb Foundation 4 填充网格行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17879527/