YUI Grid 100％宽度页面，自定义模板宽度

Question

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

有没有一种方法可以自定义他们的'模板3'，它提供了300px的列来获得我需要的400px列？

Answer 1

我确定如何做到这一点。在YUI论坛上为Nate的荣誉指引我朝着正确的方向前进。

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

例如，想要一个固定的480像素宽，十三分之四百八十零给我36.9231em非IE和480/13.33为IE

使用模板3整除36em的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即可添加另一个400像素的列，或者修改现有的列以满足您的需求。如果要添加另一列，请确保考虑附加宽度（加上边距），并减小其他元素的宽度，或者增加包含元素的宽度。

如果布局使用浏览器的100％宽度，宽度可能不是问题，但是如果您的内容被包含在容纳所有列的容器元素中，请确保调整现有元素以构成为您的新列的大小。

编辑：另外，如果你正在处理100％宽度的布局，它可能更好的大小使用百分比你的列，而不是一个固定的像素大小。由于列的包含元素将成为用户的屏幕，因此如果使用百分比，那么列大小应相对于其分辨率/窗口大小进行调整。

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

我希望有帮助。

橡子