yui-css grid：如何設置1/4 - 2/4 - 1/4網格？

我一直在試圖讓蕊CSS網格系統，使三柱網，其中上（左）第一個使用空間的1/4，第二（中間）使用的空間和第三的2/4 （右）使用1/4的空間。yui-css grid：如何設置1/4 - 2/4 - 1/4網格？

事情是這樣的：

|   header    | 
-------- ------------------------  
| left |  middle | right | 
-------------------------------- 
|   footer    |

任何投入將非常感激。

UPDATE：從答案/評論來看，我意識到需要一些更多的信息。

該網站有一個固定的（750px - 在YUI #doc）。
我對YUI沒有任何興趣，因爲我很想開始使用YUI-CSS作爲基礎框架，所以我正在做的這個項目是測試它是否滿足我的需求。我喜歡它在不同瀏覽器中以相同方式工作的事實。

來源

2009-07-02 Egil Hansen

你需要它保持爲YUI框架選項，或你會接受實現相同目標的非框架答案嗎？ – 2009-07-02 14:00:12

用衣的解決方案是相當棘手:)但低於UR是解決1/4，2/4，1/4列布局

<body> 
    <div id="doc4" class="yui-t5"> 
    <div id="hd"> 
    </div> <!-- header --> 
    <div id="bd"> 
     <div id="yui-main"> 
     <div class="yui-b"> 
      <div class="yui-gd"> 
      <div class="yui-u first"> 
       Left Column 
      </div> <!-- yui-u first --> 
      <div class="yui-u"> 
       Middle Column 
      </div> <!-- yui-u --> 
      </div> <!-- yui-gd --> 
     </div> <!-- yui-b --> 
     </div> <!-- yui-main --> 
     <div class="yui-b"> 
     Right Column 
     </div> <!-- yui-b --> 
    </div> <!-- body --> 
    </div> <!-- doc4 --> 
</body>

來源

2009-07-11 21:36:11 gkrdvl

我的上帝這是醜陋的，但謝謝你的答案:) – 2009-07-12 21:36:57

我已經將yui的網格用於固定格式，但對於可調整大小的液體佈局，我更喜歡this solution。這聽起來像你想使用百分比，而不是一定數量的像素。你有使用yui網格的原因嗎？

來源

2009-07-02 14:07:23 Nosredna

使用一般的CSS /（X）HTML：

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 

    <style type="text/css" media="all"> 
#wrapper {width: 100%; position: relative; } 

#header {width: 100%;text-align: center; } 

#left-col {width: 24%; display: inline-block;} 

#main-col {width: 48%; margin: 0 1%; display: inline-block;} 

#right-col {width: 24%; display: inline-block;} 

#footer {width: 100%; clear: both; text-align: center; } 
    </style> 

</head> 

<body> 

<div id="wrapper"> 

    <div id="header"> 
    <h1>...header-content...</h1> 
    </div> 

    <div id="left-col"> 
    ...left-col content... 
    </div> 

    <div id="main-col"> 
    ...main-col content... 
    </div> 

    <div id="right-col"> 
    ...right-col content... 
    </div> 

    <div id="footer"> 
    ...footer content... 
    </div> 

</div> 

</body> 

</html> 

<div id="wrapper"> 

    <div id="header"> 
    ...content... 
    </div> 

    <div id="left-col"> 
    ...content... 
    </div> 

    <div id="main-col"> 
    ...content... 
    </div> 

    <div id="right-col"> 
    ...content... 
    </div> 

</div>

這工作，但它不是特別漂亮，你還是留下來處理柱的高度和位置自己。

來源

2009-07-02 14:22:37

yui-css grid：如何設置1/4 - 2/4 - 1/4網格？

回答

相關問題