yui-css 网格：如何设置 1/4 - 2/4 - 1/4 网格？

发布于 2024-07-26 04:27:50 字数 533 浏览 11 评论 0原文

我一直在尝试让 yui-css 网格系统制作一个三列网格，其中第一个（左）使用 1/4 的空间，第二个（中间）使用 2/4 的空间，第三个（右） ) 使用了 1/4 的空间。

像这样的事情：

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

任何意见都将不胜感激。

更新：从答案/评论来看，我意识到需要更多信息。

该网站已修复（750px - YUI 中的#doc）。
我对任何 YUI 解决方案都不感兴趣（无论如何，谢谢），因为我很想开始使用 YUI-CSS 作为基本框架，所以我正在做的这个项目是一个测试，看看它是否满足我的需求。我喜欢它在不同浏览器上以相同的方式工作。

原文

I have been trying to get yui-css grid system to make a three column grid, where the first on (left) uses 1/4 of the space, the second (middle) uses 2/4 of the space and the third (right) uses 1/4 of the space.

Something like this:

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

Any input will be much appreciated.

UPDATE: Judging from the answers/comments, I realize some more info is needed.

The site has a fixed with (750px - #doc in YUI).
I am not really interested in none YUI solutions (thanks anyway), since I would love to start using YUI-CSS as a base framework, so this project I am doing is a test to see if it meets my needs. I like the fact that it works the same way across different browsers.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

童话 2024-08-02 04:27:50

使用 yui 解决方案相当棘手:)但下面是 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>

using yui solution is quite tricky :) but below is ur solution to 1/4, 2/4, 1/4 column layout

<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 原文

顾铮苏瑾 2024-08-02 04:27:50

我使用 yui 的网格来实现固定格式，但对于可调整大小的液体布局，我更喜欢这个解决方案< /a>. 听起来您想使用百分比而不是一组像素。你使用 yui grid 是有原因的吗？

回复收藏 0 原文

べ映画 2024-08-02 04:27:50

使用通用 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>

这可行，但不是特别漂亮，而且您仍然需要自己处理列的高度和位置。

Using general 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>

This works, but it isn't particularly pretty, and you're still left to deal with the column heights and locations yourself.

回复收藏 0 原文

~没有更多了~