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作为基础框架,所以我正在做的这个项目是测试它是否满足我的需求。我喜欢它在不同浏览器中以相同方式工作的事实。
答
用衣的解决方案是相当棘手:)但低于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>
+0
我的上帝这是丑陋的,但谢谢你的答案:) – 2009-07-12 21:36:57
答
使用一般的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>
这工作,但它不是特别漂亮,你还是留下来处理柱的高度和位置自己。
你需要它保持为YUI框架选项,或你会接受实现相同目标的非框架答案吗? – 2009-07-02 14:00:12