0

我不了解（任何）CSS 框架中的网格嵌套。

我正在使用具有 24 列网格的Foundation CSS 框架 - 一列 = 4.16667%，二 - 8.33333%，十二 - 50% 等。

这是我的 1920 像素浏览器宽度的网格 — 左侧部分 = 10 列 (41.66667%)，右侧部分 = 14 列 (58.33333%) — Codepen。

在右侧部分有一个标题和一个内容块：在此处输入图像描述

标题有 1 列填充（在 Foundation 中称为 «push»）：

<div class="row small-padding-horizontal-1 medium-padding-horizontal-1 large-padding-horizontal-1 xlarge-padding-horizontal-1 xxlarge-padding-horizontal-1">…&lt;/div>

— 正如您在附加的图像标题上看到的那样，它不适合网格。

内容块为 5 列宽：

<div class="small-5 medium-5 large-5 xlarge-5 xxlarge-5">…&lt;/div>

——正如你在附图中看到的那样，这个块不适合网格——它不是 5 列宽。

这是绝对正确和明显的——右块是 58.33333% 宽，所以所有内部块的宽度百分比将相应地计算这个块宽度，而不是整个窗口宽度。

我的问题是——如何为父块内的嵌套块拟合网格？

密码笔

4

3 回答 3

1

响应式框架适用于父 div 的 % 宽度。

根据您的需求进行计算有时会有点棘手和混乱。

如果您查看您的要求，您希望适合网5 column格14-column。

为此，您应该进行这样的计算。

你14-column现在24-column在嵌套时5-columns in 14-columns占用了 . 的空间。35.174%考虑24 columns到8.57 columns这不是一个整数，所以选择最接近它的一个（8 或 9 列）。

但是，如果你想确切地拥有5 in 14 columnsie 60/7，24 columns你应该把它作为一个整数给你 ..14*7 columns 10*7 colums和5*7columns

您的网格应该在网格178-column的70-columns左侧和98-columns右侧和35-columns内部98-columns。

更简单的方法为 5 列网格编写自定义类以占据35.17%

于 2014-11-05T08:23:50.063 回答
0

嗯，CSS 框架只为第一级块提供了一个网格——所有嵌套的块都应该手动计算以适应顶级网格。

这是红色块适合主网格的计算（右侧容器也根据屏幕分辨率更改列数）：

@media screen and (max-width: 1920px) { width: (5 / 14 * 100 + 0%); } /* width — 5 columns, parent container — 14 columns -> 35.7% */
@media screen and (max-width: 1440px) { width: (7 / 18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns -> 38.88 */
@media screen and (max-width: 1280px) { width: (7 / 18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns */
@media screen and (max-width: 1024px) { width: (10 / 22 * 100 + 0%); } /* width — 10 columns, parent container — 22 columns */
@media screen and (max-width: 640px) { width: (16 / 24 * 100 + 0%); } /* width — 16 columns, parent container — 24 columns */

所以，我不再在 HTML 和 Foundation 框架的 grid.css 文件中使用列类，因为它完全没用。

于 2014-11-05T09:09:03.540 回答
0

每个框架的工作方式都不同。

在 Cascade Framework 中，一个网格元素基本上只需要col类，并且可以无限嵌套col类。

为了轻松实现无限嵌套，网格元素既没有填充也没有边距。为了在您的页面上保持一致的装订线，您通常使用类作为内容的包装器来补充col类。cell

例子 ：

<div class="col width-1of2">
    <div class="col width-1of2">
        <div class="cell">
            [Content]
        </div>
    </div>
    <div class="col width-fill">
        <div class="col width-1of3">
            <div class="cell">
                [Content]
            </div>
        </div>
        <div class="col width-1of3">
            <div class="col width-3of5">
                <div class="cell">
                    [Content]
                </div>
            </div>
            <div class="col width-fill">
                <div class="cell">
                    [Content]
                </div>
            </div>
        </div>
        <div class="col width-fill">
            <div class="cell">
                [Content]
            </div>
        </div>
    </div>
</div>
<div class="col width-fill">
    <div class="col width-1of4">
        <div class="cell">
            [Content]
        </div>
    </div>
    <div class="col width-fill">
        <div class="col width-2of3">
            <div class="cell">
                [Content]
            </div>
        </div>
        <div class="col width-fill">
            <div class="cell">
                [Content]
            </div>
        </div>
    </div>
</div>

另请参阅此演示和官方文档。

于 2016-01-16T01:20:04.597 回答