21

次のようなレイアウトを使用して 3 列の Web サイトを開発しています。

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

しかし、CSS のデフォルトの「位置」プロパティ<DIV>'sが「静的」であることを考慮すると<DIV>'s、予想どおり、上下に表示されました。

そこで、CSS プロパティの 'position' を 'relative' に設定し、'middle' と 'right' の 'top' プロパティ<DIV>'sを -(マイナス) 前の の高さに変更しました<DIV>。それはうまくいきましたが、このアプローチは私に2つの問題をもたらしました:

1) Internet Explorer 7 では 3 つの列が適切に表示されますが、垂直スクロールバーは上下<DIV>'sに配置されているように維持され、コンテンツの後に多くの空白ができます。私はそれをしたくありません。

<DIV>2) これらの要素の高さは可変であるため、各'top' プロパティに設定する値がよくわかりません。ハードコーディングしたくありません。

だから私の質問は、このレイアウトを実装するための最良の (シンプルでエレガントな) 方法は何でしょうか? 私は絶対配置を避けたいと思っています。また、デザインをテーブルレスに保ちたいと思っています。

4

9 に答える 9

23

A List Apartをまだチェックアウトしていない場合は、ウェブサイト デザインの優れたチュートリアルとガイドラインが含まれているので、チェックアウトする必要があります。

特にこの記事はあなたを助けるはずです。

于 2008-09-17T13:40:23.410 に答える
2

BluePrint CSSを試してみてください。使い始めるのは非常に簡単ですが、ほとんどのアプリケーションで十分に強力です。

わかりやすいチュートリアルと例。箱から出してすぐにまともな結果を生成するタイポグラフィ ライブラリがあります。

于 2008-09-19T10:07:49.957 に答える
1

私は960グリッドシステムが好きです。これは、画面を12（または16）列に分割する、軽量で使いやすいcssです。これを3列のデザインに使用し、それに応じて残りのコンテンツを配置できます。

于 2008-09-19T10:19:28.353 に答える
1

3 つの列 (または奇妙な方法で使用可能なスペースに分割された他の数の列) を実行するために私が見つけた最も簡単な方法は、YUI Gridsです。基本的なレイアウトを提供するYUI Grids Builderがあります。次の例では、幅 750 ピクセルの基本的な 3 列のレイアウト (1/3 1/3 1/3 に分割) と 160 ピクセルの左側のサイドバーが表示されます。他の幅、サイドバー構成、列分割に変更するのは非常に簡単です。

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>
于 2008-09-18T07:49:35.693 に答える
1

検索できる例とライブラリが多数あります。いくつかは既にリストされています (A List Apart は必読です)。

私はこれまでのいくつかのサイトでYahoo User Interface Library (YUI)を使用してきましたが、とても気に入っています。Yahoo は完全にサポートしており、すぐに理解して使用できます。ここにCSS for Gridsがあります。これにより、ページを必要な数の列とセクションにフォーマットできます。

YUI が優れているのは、サイトの基盤を一から作り直す必要がなく、基盤がすべてのブラウザーで確実に機能するようにするためのすべての作業を YUI が行うからです。そして何よりも、それは無料です。

于 2008-09-18T12:56:20.060 に答える
0

このコードは、IE 8、Chrome、Firefox を搭載したコンピューターで動作します。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>
于 2011-02-13T20:48:47.430 に答える
0

十分な間隔があると仮定して、div を左に移動してみてください。これにより、それらがすべて同じ行に保持されます。

于 2008-09-17T13:37:13.980 に答える
0

固定列の場合、height:xxxpx を設定するだけで同じになります。

この3 カラム レイアウト ジェネレーターを使用して試してみてください。

于 2009-02-25T06:18:18.890 に答える
-1

まず、相対配置はあなたが説明したことを行います。元の場所にスペースを確保しますが、DIV オフセットをある程度表示します。

DIV をフロートすると、左から右にスタックされますが、これにより問題が発生する可能性があります。

CSS を使用した 3 列のレイアウトは非常に困難です。[ http://www.glish.com/css/7.asp]をご覧ください。

于 2008-09-17T13:38:27.190 に答える