Question

我正在使用Foundation 5 framework并正在尝试解决我遇到的问题。假设我有一个这样的布局。

<div class="row">
    <div class="large-15 columns">
        <div class="large-9 columns">

        </div>

        <div class="large-6 columns">
            <div class="large-3 columns">
                <p>stuff</p>
            </div>
            <div class="large-3 columns">
                <p>stuff</p>
            </div>
        </div>
    </div>
</div>

如何阻止.large-3列嵌套？我希望每个.large-3列占用其父列的一半（.large-6）。这可能是，或者我做错了吗？

Answer 1

首先，基础网格是12个单位宽，所以除非你已经构建了一个自定义网格，并为它编写了自定义CSS，否则大15不会有任何意义。

话虽这么说，这将使用12个单元的网格将右侧列整齐地分成两半。无论嵌套的深度如何，网格中的每一行都必须加起来为12。如果你为15个单元的网格布置了必要的结构，那么同样的原则也适用，尽管把事情分成两半要困难得多。

<div class='row'>
  <div class='large-12 columns'>
    <div class='large-7 columns'>
      <p>stuff</p>
    </div>
    <div class='large-5 columns'>
      <div class='large-6 columns'>
        <p>stuff</p>
      </div>
      <div class='large-6 columns'>
        <p>stuff</p>
      </div>
    </div>
  </div>
</div>

Answer 2

我认为你需要块网格。 http://foundation.zurb.com/docs/components/block_grid.html

如果使用“small-block-grid-2”类和两个“li”创建块网格，则两个li将占用可用宽度的一半。

此外，我还会显示您的上一条评论，如果您不需要保证金，则将折叠类添加到“行”div。

我希望这会有所帮助。

基础5：非嵌套布局

2 个答案: