CSS框架中的网格嵌套
我不明白(任何)CSS框架中的网格嵌套。CSS框架中的网格嵌套
我使用24式柱网格Foundation CSS框架 - 一列= 4.16667%,二 - 8.33333%,12 - 50%,等等
这是我1920像素浏览器宽度格 - 左部分= 10栏(41.66667%),右栏= 14栏(58.33333%) - Codepen。
内右侧有一个标题和内容块:
标题有1个填充(在基金会它被称为«推»):
<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%,所以所有内区块的宽度百分比都会根据此区块宽度计算,而不是整个窗口宽度。
我的问题是 - 我如何适合嵌套块内的父块内的网格?
响应框架与父母的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 columns
即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%
好,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和地基没有更多的使用列班框架的grid.css文件,因为它完全没用。
事情对于每个框架都有不同的工作方式。
在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>
你介意链接到小提琴吗? – GSaunders 2014-11-03 17:57:19
[Codepen](http://codepen.io/anon/pen/ymgsH?editors=110) - 你可以看到1920px网格。 – artuska 2014-11-03 18:21:46
你想适合什么? 14列中的5列网格? – Sudheer 2014-11-04 09:23:03