次のサンプルの 2 つのspanタグは隣り合って表示されると思っていましたが、上下に表示されていました。widthクラスの.right を 49%に設定すると、spanそれらは隣り合って表示されます。padding/margin右側のスパンに見えない部分があり、50% 以上かかるように、右側のスパンが押し下げられている理由がわかりません。HTMLテーブルを使用せずにこれを実行しようとしています。何か案は？

説明してくれてありがとう。float:leftFF 3.1 で期待どおりの結果が得られ、美しく動作します。残念ながら、IE6 では、右側のスパンは 50% の 50% をレンダリングするため、実際にはブラウザー ウィンドウの 25% の幅になります。幅を 100% に設定すると、目的の結果が得られますが、標準準拠モードの FF 3.1 では機能しなくなります。ハックに頼ったり、複数の CSS シートを使用したりせずに、FF と IE 6 の両方で動作させることは困難でした

フロートを使用してコンテンツのさまざまなセクションを表示する、非常に高速に作成したサイトがあります。フロートされたコンテンツと追加のマージンがあるコンテンツはどちらもFF/IEで正常に表示されますが、サファリではdivの1つが完全に非表示になっています。paddingとに切り替えてみましposition:relativeたが、何も機能しませんでした。コードを取り出して右側に表示すると、再び表示されますが、フロートされたコンテンツの下に表示されます。

問題を引き起こしていると思われるcssの主なセクションは次のとおりです。

これにより、＃settings divにサイズを指定してもしなくても、同じ結果が得られます。任意のアイデアをいただければ幸いです。

ソースコードを確認するには、 http： //frickinsweet.com/tools/Theme.mvc.aspxでサイトを利用できます。

<div>すべてに 2 つの s を含むリストがあり、<li>それらを並べてフロートさせたいと考えてい<li>ます。どうすればいいのですか？

タイトルといくつかのツール ボタンを含むヘッダー バーを持つ単純なボックスを作成したいと考えています。次のマークアップがあります。

これは Firefox と Chrome でうまくレンダリングされます:

http://www.boplicity.nl/images/firefox.jpg

ただし、IE7 は完全に台無しになり、正しいフロート要素をページの右側に配置します。

http://www.boplicity.nl/images/ie7.jpg

これは修正できますか？

一緒にレイアウトのラフを作成し、ブラウザのテストを行っています。以前にこの問題に遭遇したことはありません。このページのフッターにあるお問い合わせフォームを確認してください。

http://staging.terrilynn.com/fundraising/

ソース順で最初に右にフロートされた幅 298px の div があります。その後に他のいくつかの div が続き、それぞれの子フォーム要素が左にフロートされます。

right-floated メッセージ div の左側に表示されるはずの div が消えています。

ページは Firefox で正しく表示されます。どんな助けでも大歓迎です。

<div>通常、 のような要素はコンテンツに合わせて大きくなりますが、このfloatプロパティを使用すると、CSS の初心者には驚くべき問題が発生する可能性があります。フローティング要素にフローティングでない親要素がある場合、親は折りたたまれます。

例えば：

この例の親 div は、そのフローティングされた子を含むように展開されませんheight: 0。

この問題をどのように解決しますか？

ここで、ソリューションの完全なリストを作成したいと思います。ブラウザ間の互換性の問題を認識している場合は、指摘してください。

解決策 1

親をフロートします。

長所: セマンティック コード。
短所：常に親を浮かせたいとは限りません。やるとしても、親の親などを浮かしますか？すべての祖先要素をフロートする必要がありますか?

解決策 2

親に明示的な高さを与えます。

長所: セマンティック コード。
短所: 柔軟性がありません。コンテンツが変更されたり、ブラウザーのサイズが変更されたりすると、レイアウトが崩れます。

解決策 3

次のように、親要素内に「スペーサー」要素を追加します。

長所: コードは簡単です。
短所: セマンティックではありません。スペーサー div は、レイアウトのハックとしてのみ存在します。

解決策 4

親を に設定しoverflow: autoます。

長所: 余分な div は必要ありません。
短所: ハックのようです - それはoverflowプロパティの目的ではありません。

コメント? 他の提案？

http://biochrom.fivesite.co.uk/catalogue4.asp

上のページには左に浮いた画像があります。その右側には、「機能」というタイトルのリストがあります。リスト項目には背景画像がありますが、表示されていません。リスト 2 は、背景画像がどのように見えるかを示しています。

弾丸を見えるようにする方法を知っている人はいますか?

私はデザイナーと<div>いうよりもプログラマーであり、テーブルを使用するのではなく s を採用しようとしていますが、行き詰っています。

これが私がやろうとしていることです。アンケートページを開設しています。各質問のテキストを青い div の上部に配置し、長すぎる場合は折り返します。すべての赤い div をコンテナー div の右上隅に並べたいと思います。

レイアウト http://img528.imageshack.us/img528/4330/divsforsurveyop2.jpg

これが私が始めたことです。フレームの幅が 420 ピクセルを超えている限り、問題なく動作します。次に、赤い div は次の行にスキップします。間違ったアプローチをしたのではないかと思います。おそらく、物事を右に浮かせるべきでしょうか?

float: left左のアイテムを使用して、同じ行に2つのアイテムを配置したい。

私はこれを一人で達成するのに何の問題もありません。問題は、ブラウザのサイズを非常に小さく変更しても、2 つの項目を同じ行に表示したいということです。ご存知のように、テーブルの場合と同様です。

目標は、右のアイテムが何があってもラップしないようにすることです。

CSS を使用してブラウザに、内容をdivラップするよりも引き延ばして、divfloat: right;がfloat: left; div

私が欲しいもの:

マークアップ

CSS

IEとFFの結果はIE&&FF
になりますhttp://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
結果はIE6と7の両方で同じです。div間のギャップを削除するにはどうすればよいですか。

Udate
私はそれぞれ100％の高さの2つのdivを持っています。左側のdivは固定幅のフローティングdivです。正しいマージンを与えた後でも-左から右のdivに、2つのdivの間にギャップ（3px）が残ります。Firefoxの場合と同様に、正しくレンダリングされます。

私がクァークモードを使用した理由は、divの高さを100％取得できるようにするためです

このギャップをなくすことができますか？または、純粋なcssを使用して2列の100％高さのレイアウトを行うためのより良い方法はありますか？