如何在 4 列 YUI grid.css 布局中细分列？
我有一个 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 列，额外的一列来自打破范围列 2/3、1/3。我能得到的最接近的是 Scope 下的 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 更改为
我缺少什么？
I have a YUI grid that gives me 4 uneven columns:
<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>
Below that I want to have 5 columns, with the extra one coming from breaking the Scope column 2/3, 1/3. The closest I can get is 1/2, 1/2 under 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>
It seems like changing the div marked <!-- split Scope column --> to <div class="yui-gc"> should do the trick, but it doesn't.
What am I missing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我确信您已经尝试过，您的 div 的 .yui-g 应该是 .yui-gc。它还需要包装在 yui-u 中，或者除了 yui-gc 之外还有一个 yui-u 类。然而 yui css 文件此时会自行崩溃。 .yui-gd div.first 规则位于 src 中的 .yui-gc div.first 规则之后并破坏它。结果是列排列为 1/3, 2/3，而不是应有的 2/3, 1/3。
最简单的（尽管可能很hacky）修复方法就是放入一个内联声明来放置列宽回到应有的位置。
as i'm sure you've already tried, the .yui-g for your div should be a .yui-gc. it also needs to be either wrapped in a yui-u or have an yui-u class in addition to the yui-gc. however the yui css file trips on itself at this point. The .yui-gd div.first rule comes after the .yui-gc div.first rule in the src and clobbers it. The result is that the columns are arranged 1/3, 2/3 instead of 2/3, 1/3 like they should be.
The simplest (as hacky as it may be) way to fix would to just put in an inline declaration to put the column widths back to where they should be.