网格内的CSS网格

Question

我正在使用960 Grid System，我正在尝试实现以下目标-

|-----| |-------------------|
|     | |  |--|  |-----|    |
|     | |  |  |  |     |    |
|     | |  |--|  |-----|    |
|     | |                   | 
|     | |  |------|  |--|   |
|     | |  |      |  |  |   |
|     | |  |------|  |--|   |
|-----| |-------------------|

有办法吗？我在右列中需要第二组div的唯一原因是，因为左列很长，而且我不希望第二组列之间有间隔。

如果有更好的方法可以实现这一目标，我将非常感谢任何指导。

Answer 1

此功能内置在Grid 960系统中。您只需将左右嵌套的网格项分别指定为“ alpha”和“ omega”类。

这里是一个例子：

<div class="container_12">

  <div class="grid_3">
  </div>

  <div class="grid_9">

    <div class="grid_4 alpha">
    </div>

    <div class="grid_5 omega">
    </div>

    <div class="grid_5 alpha">
    </div>

    <div class="grid_4 omega">
    </div>

  </div>

</div><!-- end .container_12 -->

Answer 2

如果您愿意考虑其他框架，这是通过Cascade Framework实现所需结果的方法：

<div class="site-center"> <!-- Center all content in a responsive container -->
    <div class="col width-1of4"> <!-- Your left column goes here -->

    </div>
    <div class="col width-fill"> <!-- Your main content goes here -->
        <div class="col"> <!-- First row -->
            <div class="col width-1of3"> <!-- First element of first row -->

            </div>
            <div class="col width-fill"> <!-- Second element of first row -->

            </div>
        </div>
        <div class="col"> <!-- Second row -->
            <div class="col width-2of3"> <!-- First element of second row -->

            </div>
            <div class="col width-fill"> <!-- Second element of second row -->

            </div>
        </div>
    </div>
</div>

Cascade框架中的一个网格元素是

• 以下HTML元素之一：section，main，article，header，footer，aside或nav（如果需要，这些元素会用旧的IE的HTMLshiv填充）。

• 具有'col'类的div元素（可以在不带polyfill的旧IE中使用。

要向网格元素添加宽度，请添加格式'width-XofY'的类，其中Y可以为2、3、4、5、6、7、8、9、10、12、16或24和X可以是小于X的任何值。

更具体地说，这是您可以在Cascade Framework中使用的有效类的一些示例：'width-1of2'（宽度：50％），'width-3of4'（宽度：25％），'width-2of5'（宽度：40％），“ width-2of5”（宽度：40％），“ width-2of7”（宽度：28.5714286％）和“ width-13of16”（宽度：81.25％）

除了这些类之外，您还可以使用分别适合内容并填充100％宽度剩余部分的'width-fit'和'width-fill'类。或者，您可以只定义自己的类和ID，并为这些类添加自定义宽度，以“语义”方式进行操作。

如果您的构建包括响应性模块（推荐的构建就是这种情况），则所有网格元素的宽度会在移动设备上自动重置为100％。您可以使用“ mobile-width-3of16”，“ phone-width-3of7”或“ tablet-width-2of4”等类来自定义不同宽度范围的布局，以及“ desktop-hidden”，“ mobile-hidden”类，“隐藏电话”或“隐藏平板电脑”以隐藏具有范围的特定屏幕的内容。