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中的其他列是如何設置的，並遵循其方法。

我希望有幫助。

橡子