如何从YUI GRID工具获取边框？

Question

我对YUI很新。我用this tool生成了一些css网格布局。但即使我得到代码，当在浏览器中呈现时，我根本无法看到边框。但其他人（如对齐，列数......）是正确的。

如何为YUI生成的代码添加边框？

提前致谢

Answer 1

您可以通过向yui-u类

添加样式来为YUI2网格添加边框

.yui-u {
  border: 1px solid black;
}

但是，边框对YUI2网格的效果不是很好，因为它依赖于列的宽度百分比，因此您必须在每个单元中插入另一个div并为该div添加边框：

<style>.yui-u-inner { border: 1px solid black; }</style>

<div class="yui-g">
  <div class="yui-u first">
    <div class="yui-u-inner"></div>
  </div>
  <div class="yui-u">
    <div class="yui-u-inner"></div>
  </div>
</div>

可能有更优雅的解决方案。

你应该考虑转移到YUI3。 YUI2仅处于维护模式，除了基本的bug修复之外没有新的开发。 YUI3非常活跃，特别是它的CSS网格使用起来要简单得多。