网格中的CSS网格

Question

我正在使用一个960网格系统，我正在尝试实现如下所示--

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

有没有办法做到这一点？我需要右列中的第二组div的唯一原因是因为左列太长了，我不想要第二组列之间的空格。

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

Answer 1

此功能内置于网格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

如果您愿意考虑其他框架，以下是如何使用实现所需结果：

<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框架中的网格元素是

• 下列元素之一:节、主、文章、页眉、页脚、旁注或导航(这些元素是用旧IE的HTMLshiv多重填充的，以备需要时使用)。
• 具有‘
• ’类的div元素(可以在没有多填充的旧IE中使用)。

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

更具体地说，这里有一些你可以在Cascade框架中使用的有效类的例子：'width-1of2‘(width : 50%)，'width-3of4’(width : 25%)，'width-2of5‘(width : 40%)，'width-2of5’(width : 40%)，'width-2of7‘(width:28.5714286%)和'width-13of16’(width:81.25%)。

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

如果您的构建包括响应性模块(这是推荐构建的情况)，则所有网格元素的宽度在移动设备上会自动重置为100%。您可以使用“mobile- width -3of16”、“phone-width-3of7”或“tablet-width-2of4”等类为不同的宽度范围自定义布局，并使用“桌面隐藏”、“移动隐藏”、“手机隐藏”或“tablet-隐藏”等类为特定屏幕范围隐藏内容。