基础5:非嵌套布局
基础5:非嵌套布局
提问于 2014-01-17 05:41:38
我正在使用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)的一半。这是可能的，还是我做错了？
回答 2
Stack Overflow用户
发布于 2014-01-17 10:40:25
首先，基础网格是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>Stack Overflow用户
发布于 2014-03-10 18:31:31
我觉得你需要块格子。http://foundation.zurb.com/docs/components/block_grid.html。
如果使用类"small- block - grid -2“和两个" li”创建块网格，那么两个li都将占用可用宽度的一半。
我还展示了你的最后一条评论，如果你不需要空白处，那么将折叠类添加到"row“div。
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21173488
复制相关文章
相似问题
腾讯云开发者
