Как подразделить столбец в раскладке YUI grid.css с 4 колонками?

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, 1/2 под Scope:

<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 class="yui-gc"> должен сделать трюк, но это не так.

Что мне не хватает?

Answer 1

как я уверен, вы уже пробовали, .yui-g для вашего div должен быть .yui-gc. он также должен быть завернут в yui-u или иметь yui-u-класс в дополнение к yui-gc. однако файл yui css отправляется сам по себе в этот момент. Правило .yui-gd div.first появляется после правила .yui-gc div.first в src и сжимает его. В результате столбцы расположены на 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>