単純な3列の純粋なCSSレイアウトはありますか？次のことを必要としない

ワン：画像上の単純な3列の純粋なCSSレイアウトはありますか？次のことを必要としない

リライアンス（すなわち「のどの列」）
すごみのいくつかの種類をまたはIE
のために特別に入れる「ハック」を実行するためにIEが必要Quirksモードで
はよくビュースクリーンをオフに置く高い負の数に設定し、他の重複3つのdiv要素のようなストレンジネス（すなわち「聖杯」）
マージン（再び「聖杯」のレイアウトを）持っていません

上記のいずれにも依存しないCSSで3列レイアウトを見つけることができません。そして、上記のいずれかに頼ることは、テーブルをCSSよりも多く使うことの利点を否定するようです。左の列の幅を変更したいときはいつも、Photoshopを外にしてイメージをサイズ変更する必要はありません。そして、私は、DIVがなければならない画面のどの辺からいくつのピクセルが出てくるのかを計算するために電卓を抜き出す必要はありません。

私は同じ高さのレイアウトを探しています。

誰でも？

EDIT：センターカラムが液体で、幅100％を探しています。

EDIT：左右の列の幅をピクセル単位で指定したいと考えています。

EDIT：背景は透明にすることができますが、上下に動く列の間には分割線があります。

出典

2009-05-15 Sean

Errare humanum est - 私はあなたがハックなしで逃げることができるとは思わない。特に高さが等しいためです。もちろん、あなたのベースにしたいCSSのバージョンに依存します。 –

ボーダーと背景色/画像の要件を指定する必要があります。透明な背景と罫線のない3つの列は簡単です。 –

CSSについて話すとき、「シンプル」なものはありません。

しかし、クロスブラウザであり、正常に機能し、完全にHTMLとCSSに準拠した簡単なソリューションがあります.3つの列を持つ表を使用します。

推論：DIVは同じ動的高さを持つことを意味しません。したがって、CSSはこれをサポートしていません。子要素の高さが同じであることを確認するブロック要素が必要な場合は、その表が対象となります。

[編集]何かをするように設計されておらず、それがうまくいかず、うまくいかないときは、不平を言ってやめてください。 DIVはテーブルではなく、ハッキングに頼らずにDIVとして使用することはできません。 various placesで既に述べたとおり

[EDIT2]、レイアウトにテーブルを使用しない理由は、初期の時代には、テーブルがネストされたテーブルの数十を持っていたのみ設計要素とHTMLへのリードだった、ということでした。それは良くないね。しかし、それはあなたを意味するわけではありませんすべての場所に置くために単一のテーブルを使用する必要はありませんし、右の内側のものを作るためにCSSに依存しています。

脳はパラシュートに似ています。それは持っているのはいいですが、開いていると便利です。

出典

2009-05-15 09:24:15

テーブルは、データのビット間の関係を表現するように設計されています（行の各項目が共通しており、列の各項目が共通点を持っています）。列内のすべてのセルを高さで共有させることは結果であり、原因ではありません。 – Quentin

+10

さて、目標はありますし、2つのツールがあります。 1つは眉をひそめられ、もう1つは法案にまったく適合しません...あなたはどちらを使いますか？ –

+1シンプルなものであればレイアウト用のテーブルを使っても恥ずかしいことはありません。 –

私はRobertに同意します。ブラウザがCSSルールを解釈し、最終ページを別の方法でレンダリングするため、要件に柔軟性を持たせることなく完璧なソリューションを見つけることはできません。

出典

2009-05-15 09:23:36 Nick

jSを使用するとこれを実現できます。

3つのDivsを作成する場合、1つの浮動小数点が1つの浮動小数点を右に残し、中央が余白として左に&の幅で中央に配置します。

それぞれのdivは独自のIDを持っていて、高さを計算することができます.2を設定すると2が最も高くなります。

かなりシンプルなJquery。

出典

2009-05-15 10:13:43 Lee

javascriptでは簡単ですが、彼は純粋なCSSソリューションを求めました。 –

-2

3列、同じ高さにページを分割しますか？

<html> 
<head> 
<style type="text/css"> 
#col_wrapper{ 
    height: 400px; 
} 

.col{ 
    width: 33%; 
    float:left; 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="col_wrapper"> 
    <div class="col"> 
     one 
    </div> 
    <div class="col"> 
     two 
    </div> 
    <div class="col"> 
     three 
    </div> 
</div> 
</body>

奇妙なものもありません。

出典

2009-05-15 10:31:09 gunnarsson

固定高さが働かないことに言及しておきます。 1つのページには中央の列に5段落のテキストがあり、もう1つには25があるかもしれません。 – Sean

http://960.gs/

この1つ（および他の様々なレイアウトの）3列のレイアウトのために使用することができます。個人的には、divsをすべて使用するのはいい考えではないと思いますが、シンプルでうまくいきます。

編集：100％幅のレイアウトの場合http://www.alistapart.com/articles/fluidgrids/が役立つかもしれませんが、この種のレイアウトが「シンプル」なのはまだ分かりません。

出典

2009-05-15 10:39:25

申し訳ありませんが、私は100％幅を探しています。 – Sean

ええ、離れてリストからのものは少し複雑に見えます。あまり望ましくないものが本当に明確でないもの、複雑なスタイルシートを使うもの、レイアウト用のテーブルではなくテーブルを使用するものの1つです。 – Sean

あなたは適応できる可能性があります：

http://matthewjamestaylor.com/blog/perfect-3-column.htm

出典

2009-05-15 12:25:15

これは有望そうですが、パーセンテージの幅ではなく、ピクセル幅の列を探していると言わざるを得ないと思います。同じWebサイトには、ピクセル幅（上記の「聖杯」）のテンプレートが含まれていますが、非常に畳み込まれたスタイルシートです。レイアウト用にテーブルを使用するよりもあまり望ましくありません。パーセンテージ幅の列が必要な人にとっては、それは非常に良いでしょう。 – Sean

ここにピクセル幅のバージョンがあります： http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm –

YAML

"もう一つの複数列レイアウト" （YAML）は、現代の作成ための（X）HTML/CSSフレームワークで、フレキシブルフローティングレイアウト。この構造は、プログラミングで多用するであり、エンドユーザにとっては絶対にアクセス可能です。

IEのバグ修正がいくつか含まれていますが、削除することはできます。

出典

2009-05-15 12:33:09 mjn

最近YAMLという名前があまりにも多くあります！ –

単純な3列の純粋なCSSレイアウトはありますか？次のことを必要としない

答えて

関連する問題