web-dev-qa-db-ja.com

<DIV>タグを使用して3列のWebサイトを実装する最良の方法は？

私は次のようなレイアウトを使用して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>

しかし、<DIV>'sのデフォルトのCSS 'position'プロパティが 'static'であることを考慮すると、私の<DIV>'sは、期待どおりに上下に表示されていました。

そこで、CSSプロパティの「position」を「relative」に設定し、「middle」と「right」の「top」プロパティを変更し、<DIV>'sを前の<DIV> 。うまくいきましたが、このアプローチには2つの問題がありました。

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

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

だから私の質問は、このレイアウトを実装するための最良の（シンプルでエレガントな）方法は何でしょうか？絶対配置を避け、設計をテーブルレスに保ちます。

layouthtmlcss
20
E.Z.

まだチェックアウトしていない場合 A List Apart には、ウェブサイトのデザインに関する優れたチュートリアルとガイドラインが含まれているため、ぜひチェックしてください。

この記事 特に役立ちます。

23
Josh

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

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

2
Mats Wiklander

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

1
sdfx

いくつかの例やライブラリがあり、検索できます-すでにリストされているカップル（A List Apartは必読です）。

私は Yahoo User Interface Library（YUI） を最後の2、3のサイトで使用しており、本当に気に入っています。ヤフーはそれを完全にサポートしており、理解と使用が簡単です。ここに CSS for Grids があります。これにより、ページを必要な数の列とセクションにフォーマットできます。

YUIは、サイトの基盤のためにホイールを作り直す必要がないのでいいです。基盤はすべてのブラウザーで機能することを確認するためにすべての作業を行います。そして何よりも無料です。

1
Baer

3カラム（または使用可能なスペースで奇妙な方法で分割された他の数のカラム）を実行するために私が見つけた最も簡単な方法は YUI Grids です。基本的なレイアウトを提供する YUI Grids Builder があります。次の例では、750px幅の基本的な3列のレイアウト（分割1/3 1/3 1/3）と160pxの左サイドバーが表示されます。それを他の幅、サイドバー設定、列分割に変更するのは本当に簡単です。

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>
1
Peter Kelley

Divを左にフロートしてみてください。十分な間隔があると仮定して、すべてを同じ線上に保ちます。

0
Joshua

このコードは、私のコンピューターで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>
0
Nqko

固定列の場合、height：xxxpxを設定するだけでそれらが等しくなります。

この 列レイアウトジェネレータ を使用して試してください。

0
unigogo