html - Gumby 框架网格的 Div 嵌套问题

Question

使用 Gumby 框架时，我遇到了嵌套 div 的问题。

我试图在十列网格中嵌套三列和七列网格。

我尝试了一些 HTML/CSS 变体，但都无济于事。图我一定遗漏了一些相当简单的东西。

Site Link

HTML 代码示例:

 <div class="ten columns main_col">
 <p>Text removed</p>

 <div class="row">
 <div class="three"><h2 class="100width">Core Services</h2></div>
 <div class="seven"></div>
 </div>

 </div>

Answer 1

该框架并不“智能”。一切都基于 12 或 16 列。所以你必须为这种性质的事情做所有的思考。如果您想要在 12 列网格中放置一个 3-7 居中的容器，可以使用以下代码:

<!-- 10 Columns -->
<div class="row">
    <div class="three columns push_one">3 col</div>
    <div class="seven columns">7 col</div>
</div>
<!-- // End 10 -->

原因如下:10 列 = 12 列中的 10 列(为了论证)，该容器中的 3 列和 7 列实际上是 12 列中的 30% 旁边是 12 列中的 70% 位于 12 列中的 83.333%容器。在容器上放置 class="ten columns" 不会触发某种递归函数来将容器“重置”为 10 列网格系统；因此，愚蠢的边距、填充等。它实际上按预期工作。希望这是有道理的。