如何细分4列YUI grid.css布局中的列？

Question

我有一个YUI网格，它给了我4个不均匀的列：

  <div class="yui-gc">
    <div class="yui-gd first">
      <div class="yui-u first">Reason</div>
      <div class="yui-u">Scope</div>
    </div>
    <div class="yui-g">
      <div class="yui-u first">Related</div>
      <div class="yui-u">Product</div>
    </div>
  </div>

在下面我想要有5列，其中一列来自于破坏Scope列2 / 3,1 / 3。我能得到的最接近的是1/2，在Scope范围内的1/2：

  <div class="yui-gc">
    <div class="yui-gd first">
      <div class="yui-u first">reasons</div>
      <div class="yui-g"> <!-- split Scope column -->
        <div class="yui-u first">questions</div>
        <div class="yui-u">answers</div>
      </div>
    </div>
    <div class="yui-g">
      <div class="yui-u first">stuff</div>
      <div class="yui-u">products</div>
    </div>
  </div>

似乎将标记为<!-- split Scope column -->的div更改为<div class="yui-gc">应该可以解决问题，但事实并非如此。

我错过了什么？

Answer 1

因为我确定你已经尝试过，你的div的.yui-g应该是.yui-gc。除了yui-gc之外，它还需要包含在yui-u中或者具有yui-u类。但是yui css文件此时会自行跳转。 .yui-gd div.first规则出现在src中的.yui-gc div.first规则之后。结果是列排列为1 / 3,2 / 3而不是2/3，它们应该是1/3。

最简单的方法（尽管可能是hacky）修复方法只是放入一个内联声明，将列宽放回原来的位置。

<div class="yui-gc">
<div class="yui-gd first">
    <div class="yui-u first">reasons</div>
    <div class="yui-u yui-gc">
        <div class="yui-u first" style="width: 66%;">questions</div>
        <div class="yui-u" style="width: 32%;">answers</div>
    </div>
</div>

<div class="yui-u yui-g">
    <div class="yui-u first">Related</div>
    <div class="yui-u">Product</div>
</div>