問題タブ [css-float]

作業中のページに単純な水平タブ構造を設定しようとしていますが、フローティングdivとz-indexの組み合わせで問題が発生しています。

ブラウザで次のコードを表示する：

左側のdivのオレンジ色の境界線が右側のdivの緑色の境界線と重ならないのはなぜですか？

Float:right表のセル内に指定​​しdivても、IE では効果がないようです。また、レイヤーのコンテンツを右に揃えるために、特に text-align right を試しましたが、IE 7 では成功しませんでした。

CSS スニペット:

HTML スニペット:

HTML と CSS の両方が検証され、Firefox ではテキストが正しい位置に配置されます。コピーして貼り付けて完全なコードをテストする場合は、次の場所にあります。

(クラス宣言がいくつかの要素に対して繰り返されるという意味で CSS が最適ではないことはわかっていますが、問題に関連しない場合は、これについてコメントしないでください。)

私は CSS ベースのデザインで作業することを好みますが、バックエンド コーダーが多いため、CSS スキルは少し苦手です。レイアウトに関わると、表ベースの書式設定に頼る傾向があります。これは、何年にもわたる表ベースの乱用によって心が歪んできたためです。私がいつもつまずく特定の問題が 1 つあります。以下に代わる最良の CSS は何ですか。

私は時々使用します：

しかし、これはあまり正しくないようです。テキストを揃えようとしているのではなく、コンテンツを揃えようとしています。また、これは囲まれた要素のテキストの配置に影響を与えるようで、修正するには微調整が必​​要です。私が得られないことの1つは、なぜfloat:centerスタイルがないのですか? それが一番の解決策になりそうです。うまくいけば、私は何かが欠けていて、これを行うための完璧な CSS の方法があります。

2つのdivを並べて配置する必要があります。しかし、もっと重要なのは、これをIE6/7で正しく表示したいということです。私はFirefoxでこれを成功させることができました。私のコード：

結果は以下のとおりです。

必要な出力（FF出力）：

IE6 / 7の出力： IEでこの不要なパディングを取り除くにはどうすればよいですか、または他の方法はありますか？注：丸みを帯びたコーナーを作成するには、jQueryにjQueryとNiftyを使用します。

左にフロートされた、幅が不明な 2 つの div。そのうちの 1 つは、ページに収まりきらないほど多くのコンテンツを持っているため、最初のものの下に移動します (IE を除く)。

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

display:inline-table; を追加します。大きなものはそのコンテンツをラップします (ブラウザー間で一貫して):

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

しかし、doctype (strict だけでなく、ANY doctype だけでなく) を導入すると、Firefox にはもうありません:

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

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

次のようなヘッダーを持つ Web デザイン要件があります。

ヘッダーには、Div A、B、C の 3 つの部分があります。DIV A は左に浮動小数点で、DIV B と C は右に浮動小数点です。DIV A と DIV B には長いテキストが含まれる場合があります。そのため、オーバーフローしたテキストは省略記号として切り捨てられます。DIV C には短いテキストがあり、その内容を切り捨ててはなりません。

以下のようなHTMLを作ってみました。

text-overflow:ellipsis は、DIV A と DIV B に幅がある場合にのみ機能します (私の場合は、それらを 45% に設定しています)。

ただし、DIV C には 1 つの問題があります。DIV C の幅はローカライズによって異なる可能性があるため、その幅を明示的に設定することはできません。ブラウザウィンドウを絞り込む場合、div C を次の行に折り返すことができます。これは見栄えが悪いです。

DIV A と DIV B をオーバーフロー省略記号でそれぞれ左と右にフロートさせ、同時に DIV C を最適な幅に適応させる方法はありますか?

2 つの div をページの反対側にフロートさせ、その間にテキストを流そうとしています。2 番目 (左揃え) の div の上部は、最初の (右揃え) div の下部と同じにする必要があります。以下のコードは、FF、Chrome、Opera などでは問題なく動作しますが、IE では適切にクリアされません。両方の div がテキストの上部に表示されます。

テキスト内で左揃えの div を十分に低く移動すると、IE では問題なく動作しますが、それは実際には持続可能な解決策ではありません。

IE CSS フロート バグに関する複数のページを見つけましたが、これに直接言及しているものは見つかりませんでした。

CSS

HTML:

div黒い外側のが、そのdiv中に浮かんでいる s をラップするようにします。自動的にそのコンテンツの高さになりたいので、 id で使用style='height: 200pxしたくありません (たとえば、フローティングs)。divouterdivdiv

これを達成する方法は？