CSS框架中的网格嵌套
我使用的是具有24列网格的Foundation CSS框架-一列= 4.16667%，2- 8.33333%，12- 50%，等等。
这是我的浏览器宽度为1920像素的网格--左侧部分= 10列(41.66667%)，右侧部分= 14列(58.33333%) - Codepen。
在右边有一个标题和一个内容块：
<div class="row small-padding-horizontal-1 medium-padding-horizontal-1 large-padding-horizontal-1 xlarge-padding-horizontal-1 xxlarge-padding-horizontal-1">…</div>内容块有5列宽：
<div class="small-5 medium-5 large-5 xlarge-5 xxlarge-5">…</div>-正如你在附加的图像上看到的，这个块不适合网格-它不是5列宽。
这是绝对正确和明显的-右侧块是58.33333%宽，因此所有内部块的宽度百分比将相应地计算此块宽度，而不是整个窗口宽度。
我的问题是-我如何适应我的嵌套块内的父块网格？
Codepen
回答 3
Stack Overflow用户
发布于 2014-11-05 16:23:50
响应式框架使用父div的% width。
根据您的需求进行计算有时会有一点棘手和混乱。
如果您查看自己的需求，就会希望在14-column网格中适合5 column。
要实现这一点，您应该进行如下计算。
您的14-column现在是24-column，而嵌套时，所以5-columns in 14-columns占用了35.174%.Considering 24 columns的一个空间，这个空间可能是8.57 columns，而不是一个整数，所以选择离它最近的一个(8或9列)。
但是如果你想在24 columns中使用5 in 14 columns，也就是60/7，你应该把它作为一个整数来给你。14*7 columns 10*7 colums和5*7columns
你的网格应该是178-column，70-columns在左边，98-columns在右边，35-columns在98-columns网格的内部。
更简单的方法是为5列网格编写自定义类来占用35.17%
Stack Overflow用户
发布于 2014-11-05 17:09:04
好的，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 */因此，我不再在超文本标记语言和基础框架的grid.css文件中使用列类，因为它完全没有用。
Stack Overflow用户
发布于 2016-01-16 09:20:05
每个框架的工作方式都不同。
在Cascade Framework中，网格元素基本上只需要col类，并且您可以无限嵌套col类。
为了方便地实现无限嵌套，网格元素既没有填充也没有边距。为了在页面上保持一致的间距，通常使用cell类作为内容的包装器来补充col类。
示例：
<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>另请参见和。
https://stackoverflow.com/questions/26719603
复制相似问题
腾讯云开发者
