2009-04-23 10 views
0

未知の幅の2つのdivを左に浮かしています。そのうちの一つは、ページに収まるより多くのコンテンツを持っているので、(IEを除く)最初の下に移動します。未知の幅のCSS浮動小数点はdoctypeで空白を折り返しません

http://corexii.com/floatproblem/float.html

表示を追加します。インラインテーブル。

http://corexii.com/floatproblem/table.html

しかし、DOCTYPE(ちょうど厳密ではない、ANY DOCTYPE)を導入し、それがFirefoxでもうない:と大きなものは(一貫ブラウザ間)にその内容をラップ

http://corexii.com/floatproblem/doctype.html

Doctypeを同時に使用している間に、確実にブラウザ間で適切なdivにコンテンツをラップさせるにはどうすればよいですか?

答えて

2

にはどうすれば確実にブラウザ間で、 同時にDOCTYPEを使用しながら、その コンテンツをラップするために右のdivを得るのですか?

幅を定義しないと、にできません。この場合パーセンテージ幅をお勧めしますが、それはあなた次第です。

divのデフォルト幅は、コンテナ(この場合はページ)の100%です。 最初のdivは、ページのサイズをその固有の幅よりも小さくしない限り、実際のサイズになります。 完全で有効なdoctypeのないブラウザでの一貫性が期待されるのは単なる無駄な試みです。

+0

できない場合は、古いテーブルメソッドの代わりに純粋なCSSを使用してレイアウトを作成することは不可能です。明らかに仕様書で許可されていないレイアウトについてCSSを使用することについての話は何故ですか? –

+0

うまくいけば、CSSが現れています。インターネットエクスプローラでなければ、今はCSS3を使用している可能性があります。これにより、テーブルの機能に依存するすべてのデザインを行うことができます。その間、私は、CSSで達成できないことを認識し、うまく動作するものの、テーブルを必要としないものを設計することは、優れたWebデザイナーの責任だと思います。 CSS 2.1もかなり良いと思います。要するに、それはMicrosoftの責任です。 – wheresrhys

+0

純粋なCSSを使用して、美しくて便利で流動的なレイアウトを作成することは不可能ではありません。私たちの多くはいつもそうしています。幅を定義せずに求めていることをすることはできません。それは全く異なる議論です。 – Traingamer

0

最初に、BODY要素を含めることができます。

TraingamerはFirefoxの動作を説明してくれました。あなたの望む結果を得るためには何が必要ですか?あなたは、レイアウトを作成することが不可能なCSSについての接線を離れる代わりに、彼の話を聞くかもしれません。

が正しいウェブ仕様に準拠していないという問題に対してCSSを責めないでください。

+0

あなたはまったく貢献していません。明らかにこれらは、問題を再現する最も単純で、縮小された例です。もちろん実際には、実際の標準に準拠したページを設計するときにこの問題に遭遇しました。 また、現在の実装では、自分の望む結果がCSS単体では実現できないことが分かります。 Traingamerは解決策ではなく、回避策を提示しています。 –

+0

BODYタグを含めないと、doctypeを含めなくてもレイアウトが中断されます。それが私がそれを言及した理由です。あなたが解決策を見出せなかっただけで何かが不可能であると仮定しないでください。http://test.rottenrecords.com/test/ – Calvin

+0

これはかなりうまくいきました。試してくれてありがとうございます。 div、それは再び壊れます(したがって、レイアウトの最上位のベースでは有効ですが、ネストされたエレメントでは役に立ちません)。また、すべての垂直スペースを消費するので、ヘッダーやフッターを追加することは不可能です。 –

1

CSSは、テーブルベースのレイアウトで可能なすべてを行うことはできません。 1つは、動的な幅のレイアウトははるかに複雑です。大文字小文字のレイアウトは98%の場合でも推奨されますが、この種の動的な幅のレイアウトが本当に必要な場合は、テーブルを使用する必要があります。

慎重に調整されていないと、幅が揃っていないと、審美的な見地からはあまり良くありませんので、間違った問題を修正している可能性があります。

関連する問題