yui-css grid：1/4 - 2/4 - 1/4グリッドを設定するには？

私はyui-cssグリッドシステムを3列のグリッドにするようにしています。最初の（左）は1/4のスペースを使用し、2番目の（中）はスペースの2/4を使用し、（右）スペースの1/4を使用します。このようなyui-css grid：1/4 - 2/4 - 1/4グリッドを設定するには？

何か：

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

任意の入力がはるかに理解されるであろう。

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

このサイトには、（750px - #doc in YUI）固定されています。
基本的なフレームワークとしてYUI-CSSを使い始めることが大好きなので、私は全くのYUIソリューションには興味がありません。私がやっているこのプロジェクトは、自分のニーズを満たしているかどうかを確認するテストです。私はそれが異なるブラウザ間で同じ方法で動作することが好きです。

出典

2009-07-02 Egil Hansen

あなたはそれがYUIフレームワークオプションとして維持する必要がありますか、またはあなたは同じことを達成する非フレームワークの回答を受け入れますか？ –

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-11 21:36:11 gkrdvl

私の神thats醜い、しかし答えに感謝:) –

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

出典

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グリッドを設定するには？

答えて

関連する問題