1

我有一个 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 列，额外的 1 列来自 Scope 列 2/3、1/3。我能得到的最接近的是范围下的 1/2、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">应该可以解决问题，但事实并非如此。

我错过了什么？

4

1 回答 1

3

我确定您已经尝试过，您的 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 排列。

替代文字

最简单的（尽管它可能很笨拙）的修复方法是只放入一个内联声明以将列宽放回应有的位置。

<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>

于 2010-12-03T22:29:18.643 回答