基金会5：非嵌套布局

我正在使用Foundation 5 framework，并试图解决我遇到的问题。假设我有这样的布局。基金会5：非嵌套布局

<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）的一半。这是可能的，还是我做错了？

来源

2014-01-16 realph

首先，基础网格的宽度为12个单元，所以除非您已经构建了自定义网格并为其编写了自定义CSS，否则large-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>

来源

2014-01-17 02:40:25

对不起，我应该提到我已经写出了一个自定义15 col网格。我想知道是否有办法阻止嵌套？因为它增加了我不关心的额外利润。 – realph

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

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

此外，我显示您的最后一条评论，如果你不需要保证金，然后添加崩溃类到“行”div。

我希望这会有所帮助。

来源

2014-03-10 10:31:31

基金会5：非嵌套布局

回答

相关问题