0

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

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

有没有办法这样做？我在右列中需要第二组 div 的唯一原因是左列很长，我不想要第二组列之间的空间。

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

4

2 回答 2

2

此功能内置于 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 -->
于 2012-12-08T06:57:36.870 回答
0

如果您愿意考虑其他框架，以下是使用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”类, 'phone-hidden' 或 'tablet-hidden' 隐藏特定屏幕的内容和范围。

于 2014-01-07T19:42:19.527 回答