Question

我公司的网站目前正在使用固定宽度的960网格系统。一直有人谈论流动设计，所以我一直在研究流体960网格系统。

据我所知，这两个系统的行为方式类似，直到你有嵌套网格。例如，在固定宽度系统中：

<div class="grid_12">
    <div class="grid_6">
        <div class="grid_6">
            <p>This paragraph will fill up half the space of the grid_12 div in a 12 column grid.</p>
        </div>
    </div>
</div>

我对流体960网格系统（以及百分比）的理解将是这样的：

<div class="grid_12">
    <div class="grid_6">
        <div class="grid_6">
            <p>This paragraph will only fill up a quarter the space of the grid_12 div in a 12 column grid, at least as far as I can tell.</p>
        </div>
    </div>
</div>

现在，我明白如果我将上面代码中最里面的div更改为grid_12，它将与第一个示例相同，但网站有很多页面，虽然我可以通过并更改嵌套的每个实例因此，网格需要相当长的时间（特别是因为大部分页面是在我被录用之前编写的）。

那么，有没有办法在流体网格系统中进行嵌套工作的方式与固定宽度相同，而不是逐页改变任何东西？

我怀疑答案是否定的，但我想如果有一种方法我不想这样做，有人会知道。

Answer 1

取决于您的实际布局有多复杂，您可以尝试执行类似

的操作

.grid_6 .grid_6 { width: 100% }

等等

ofc，你需要至少为网站上的每个案例添加这些类型的选择器，但我不会真的推荐它，因为它更像是一种解决方法，而不是一个好的解决方案。

或许可以尝试找到更适合新规格的新网格/布局解决方案？

当涉及到嵌套网格时，有没有办法让流体960网格系统的行为与固定宽度960网格系统相同？

1 个答案: