1

4 つの不均一な列を提供する YUI グリッドがあります。

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

マークされた div を変更するとうまくいくように思え<!-- split Scope column -->ます<div class="yui-gc">が、そうではありません。

私は何が欠けていますか？

4

1 に答える 1

3

すでに試したことがあると思いますが、div の .yui-g は .yui-gc である必要があります。また、yui-u でラ​​ップするか、yui-gc に加えて yui-u クラスを持つ必要があります。ただし、yui css ファイルはこの時点で自動的にトリップします。.yui-gd div.first ルールは、src の .yui-gc div.first ルールの後に来て、それを上書きします。その結果、列は本来あるべき 2/3、1/3 ではなく、1/3、2/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 に答える