Html YUI网格CSS，用于具有自定义模板宽度的100%宽度页面

我使用雅虎的UI网格来构建我的大部分页面。我的一个页面是谷歌地图，我需要一个400像素左右的固定左列来输入地图图例信息。然而，YUI Grids仅为其100%页面布局提供了3列，即160px、180px和300px

---

有没有一种方法可以让我定制他们提供300px列的“模板3”来获得我需要的400px列？

肯定有一种方法。我认为这只是一个调整CSS的问题，要么添加另一个400px列，要么修改现有列以满足您的需要。如果要添加另一列，请确保考虑额外的宽度（加上边距），或者减少其他元素的宽度，或者增加包含元素的宽度

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

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

若希望新列显示在其他列的左侧，通常应将其放置在标记中其他列的前面，并应用“float:left”属性。但是，看看其他列是如何在YUI CSS中设置的，并遵循它们的方法

我希望这有帮助

---

橡子我已经决定怎么做了。感谢Nate在YUI论坛上为我指出了正确的方向

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

e、 g.想要一个固定的480px宽度，480/13为非IE提供36.9231em，480/13.33为IE提供的正好是36em

使用模板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类别，因此，鉴于一些最初的设计决定当然是基于较旧的浏览器，网格将被重新设计。

1000多个视图之后，没有一个人评论或费心指出这是有用的。嘘。