Comment puis-je Subdiviser une colonne dans une mise en page de grid.css YUI 4 colonnes?

Question

J'ai une grille de YUI qui me donne 4 colonnes inégales:

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

Voici que je veux avoir 5 colonnes, avec une supplémentaire venant de casser la colonne Scope 2/3, 1/3. Le plus proche que je peux obtenir est 1/2, 1/2 sous Portée:

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

Il semble que changer le div marqué <!-- split Scope column --> à <div class="yui-gc"> devrait faire l'affaire, mais il ne fonctionne pas.

Qu'est-ce que je manque?

Answer 1

comme je suis sûr que vous avez déjà essayé, le .yui-g pour votre div devrait être un .yui-gc. il doit également être soit enveloppé dans un Yui-u ou avoir une classe Yui-u en plus de la Yui-gc. mais le fichier css Yui voyages sur lui-même à ce stade. La règle de .yui-div.first vient après gj la règle div.first .yui-gc dans le src et il aplatit. Le résultat est que les colonnes sont disposées 1/3, 2/3 au lieu de 2/3, 1/3 comme ils devraient être.

Le plus simple (comme hacky comme il peut être) manière de fixer serait de revenir là où ils devraient être simplement mis dans une déclaration en ligne pour mettre la largeur des colonnes.

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