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网格？

回答

相关问题