<DIV> タグを使用して 3 列の Web サイトを実装する最良の方法は?[閉まっている]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

質問

次のようなレイアウトを使用して 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 'position' プロパティを考慮すると、 <DIV>'s それは「静的」です、私の <DIV>'s 予想どおり、上下に表示されました。

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

1) Internet Explorer 7 では 3 つの列が正しく表示されているにもかかわらず、垂直スクロールバーが表示されたままになります。 <DIV>'s 上下に配置されており、コンテンツが終わった後には空白がたくさんあります。それが欲しいです。

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

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

役に立ちましたか？

解決

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

この記事 特に役立つはずです。

他のヒント

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

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

私が見つけた3つの列（または、奇妙な方法で利用可能なスペースに分割された他の数の列）を実行する最も簡単な方法は次のとおりです。 YUI グリッド. 。があります YUIグリッドビルダー 基本的なレイアウトを示します。以下は、幅 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>

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

私が使用したのは、 Yahoo ユーザー インターフェイス ライブラリ (YUI) 私の最近のいくつかのサイトでとても気に入っています。Yahoo はこれを完全にサポートしており、すぐに理解して使用できます。ここにあります グリッド用のCSS, を使用すると、ページを必要な数の列やセクションにフォーマットできます。

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

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

十分なスペースがあると仮定して、div を左にフローティングしてみてください。これにより、すべての div が同じ行に維持されます。

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

これを使って 3カラムレイアウトジェネレーター 試してみる。

このコードは、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>

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

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

CSSを使った3カラムレイアウトはかなり難しいです。見て [http://www.glish.com/css/7.asp]

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top