Question

我使用Yahoo的UI网格来构建我的大部分页面。我的一个页面是Google地图，我需要大约400像素的固定左列来放置地图图例信息。然而，YUI Grids只为其100％页面布局提供3列，即160px，180px和300px。

有没有办法可以自定义'模板3'，它提供300px列来获取我需要的400px色谱柱？

Answer 1

我已经决定如何做到这一点。感谢Nate在YUI论坛中为我指明正确的方向。

要设置固定的左列，您需要将列像素宽度除以13，以确定所有非IE浏览器的em。对于IE，将列宽除以13.3333

e.g。想要一个固定的480px宽度，480/13给我36.9231em非IE和480 / 13.33正好是36em for IE

使用模板3，CSS是：

.yui-t3 .yui-b {
  float: left;
  width: 12.3207em; *width: 12.0106em;
}

.yui-t3 #yui-main .yui-b {
  margin-left: 36.9231em; *margin-left: 36em;
}

另外，如果你想调整保证金，例如零保证金，您可以执行以下操作：

#doc3 {
  margin: auto 0;
}

网格目前在YUI 3中被弃用 - 当我看到它时有点震惊。将有一些浏览器在7月份退出A类别，因此，由于一些初步设计决策基于旧版浏览器，因此网格将被重新设计。

Answer 2

肯定有办法。我认为这只是调整CSS以添加另一个400px列，或修改现有列以满足您的需求。如果要添加其他列，请务必考虑其他宽度（加上边距）并减小其他元素的宽度，或者增加包含元素的宽度。

如果布局使用100％宽度的浏览器，宽度可能不是问题，但如果您的内容包装在容纳所有列的容器元素中，请务必调整现有元素以弥补新列的大小。

编辑：此外，如果您正在处理100％宽度布局，最好使用百分比来调整列的大小，而不是固定的像素大小。由于列的包含元素将是用户的屏幕，因此如果使用百分比，则列大小应相对于其分辨率/窗口大小进行调整。

如果您希望新列显示在其他列的左侧，通常会将其放在标记中的其他列之前，并应用“float：left”属性。但是，看看如何在YUI CSS中设置其他列，并按照他们的方法。

我希望有所帮助。

橡子