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

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

1 голос
/ 03 декабря 2010

У меня есть сетка 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>

Кажется, что изменение div с пометкой <!-- split Scope column --> на <div class="yui-gc"> должно сработать, но это не так.

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

1 Ответ

3 голосов
/ 04 декабря 2010

, поскольку я уверен, что вы уже пробовали, .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, как они должны быть.

alt text

Самый простойэто может быть) способ исправить это, просто вставив встроенное объявление, чтобы вернуть ширину столбцов туда, где они должны быть. 

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

...