Question

我正在使用960网格系统，我正在尝试实现以下内容 -

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

有没有办法这样做？我在右栏中需要第二组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％）

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

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

网格内的CSS网格

2 个答案: