0

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

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

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

网站链接

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>
4

1 回答 1

4

该框架并不“智能”。一切都基于 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 列 = 10 of 12(为了论证),该容器中的 3 列和 7 列实际上是 12 列的 30%,而 12 列的 70% 位于 83.333% 的 12 列容器内。扔class="ten columns"在容器上不会触发某种递归函数来将容器“重置”为 10 列网格系统;因此,愚蠢的边距,填充等。它实际上按预期工作。希望这是有道理的。

于 2013-01-24T22:27:55.427 回答