1

私は yui-css グリッド システムを取得して 3 列のグリッドを作成しようとしています。最初 (左) はスペースの 1/4 を使用し、2 番目 (中央) はスペースの 2/4 を使用し、3 番目 (右) は) はスペースの 1/4 を使用します。

このようなもの：

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

どんな入力でも大歓迎です。

更新:回答/コメントから判断すると、さらに情報が必要であることがわかります。

  • このサイトは (750px - YUI の #doc) で固定されています。
  • YUI-CSS を基本フレームワークとして使い始めたいので、YUI ソリューションにはあまり興味がありません (とにかくありがとう)。したがって、私が行っているこのプロジェクトは、それが私のニーズを満たすかどうかを確認するためのテストです。さまざまなブラウザーで同じように機能するという事実が気に入っています。
4

3 に答える 3

2

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>
于 2009-07-11T21:36:11.523 に答える
1

私は固定フォーマットにyuiのグリッドを使用しましたが、サイズ変更可能な液体レイアウトにはこのソリューションを好みます。設定されたピクセル数ではなく、パーセンテージを使用したいようです。これにyuiグリッドを使用している理由はありますか？

于 2009-07-02T14:07:23.873 に答える
1

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.

于 2009-07-02T14:22:37.290 に答える