問題タブ [css-float]

3 つのフローティング div を 3 つのうち最大のフローティング div の高さと一致させる方法を見つけようとしています (これは、clearfix ソリューションを介してコンテナーの高さです)。

私の質問はこの質問とまったく同じですが、回答へのコメントが見落とされるという要件が必要なのは私の質問だけです:)（「2つの列の背景色が異なる場合はどうなりますか？」など）

だから本当に真似できない。このページは、scriptaculous を使用した iGoogle と同様のドラッグ アンド ドロップ メカニズムを使用しており、ドラッグドロップの並べ替え可能なコンテナーはフローティング div です。すべてのコンテナを強制的に同じ高さにすることができれば、ユーザーにとって物事がずっと簡単になります。

解決策を探せば探すほど、純粋な CSS では解決できないようです。その場合は、javascript を使用する必要があります。

前もって感謝します。

編集: idrumgood からのリンクは解決策でしたが、私が最終的に使用した解決策ではありませんでした。最終的に、競合を回避し、1 つの関数に対して jquery ライブラリ全体をロードする必要を回避するために、彼が提案した jQuery 関数をプロトタイプに移植することになりました。

これは、私が最終的に使用した JavaScript 関数ポートです。

コンテナに2つのdivがあります。1つは左のバーで、もう1つは右のバーです。どの方法を使用するかについて、いくつかのアドバイス/提案が必要です。

方法1：

方法2：

どちらが良い習慣かアドバイスしてください。

テーブルに戻ることを真剣に考えています。

これにより、 http://i29.tinypic.com/2iaw83.pngが得られます。

最初の div の巨大なスペース。なぜ？なんらかの理由で10を超えるコメントがある場合はいけません

愚かなコメントは無視してください

次のHTMLが与えられます。2つの列が表示されます：#left、#right。どちらも固定幅で、1pxの境界線があります。幅と境界線は、上部コンテナのサイズと同じです#wrap。

Ctrl +-を押してFirefox3.5.2をズームアウトすると、列が折り返されます（デモ）。

これを防ぐ方法は？

ページの左側にメニューをフロートさせようとしていますが、メニューが下のコンテンツに到達するのに十分な大きさになると、Firefox はコンテンツを本来のとおりにバンプします... 境界線を除いて。

以下は、いくつかの項目を含むスクリーンショットです。

そして、いくつかのアイテムを持つ別の

"Box 4" は予想どおりに移動されますが、その境界は左側にとどまります。うーん

HTML:

CSS:

私はテーブルを持っているウェブページを持っていて、tdの1つの中には小さいフォントを使用するスパンがあり、右端に配置するために右にフロートし、負のマージントップがあるので、tdの大きなテキストに揃えられます。

Firefox 3.0では問題なく動作しますが、Firefox 3.5にアップデートしたところ、余白がテキストを上に移動しすぎています。

別のページがあり、2つのスパンエントリがあります。2番目のページはフォントが小さく、余白が負で、同じ問題が表示されます。

3番目のページでは、h3の後にスパンが続き、フォントが小さく、余白が負であるため、Firefox3.5では正常に機能します。

今日Safariをインストールしましたが、Firefox3.5と同じように動作します。さまざまなIEバージョンを処理するための条件付きCSSがあるため、IEに問題はありません（IE 7は負のマージンを使用しますが、IE 8は小さな正のマージンを使用します）。

質問（最後に：^）：

• Firefox 3.5のスパンと負のマージンのレンダリングの変更を知っている人はいますか？

• ブラウザ固有のハッキングなしで同じ結果を得るには、他にどのようにHTMLまたはCSSを作成できますか？

2番目のケースでは、3番目のケースと同様に、2つのスパンからh3とスパンに変更しました。最初のケースは実際には表形式のデータなので、テーブルを使用しています。問題の一部を次に示します。

関連する（私が望む）CSSは次のとおりです。

前もって感謝します！PCM

私はオペラでいくつかの奇妙な浮動動作をしています (IE f は完全に異なりますが、それは後で説明します)。i アイコンを右に浮かせています。Fx と WebKit では問題なく動作しますが、opera ではアイコンが少し下に移動します。誰もがこれがどのように起こるか考えましたか?

CSS:

HTML:

Webkit http://img197.imageshack.us/img197/3269/webkit.jpg

オペラ http://img41.imageshack.us/img41/112/operaf.jpg

http://dev.dealercontrol.net/dealercontrol/index_comp1.html

このページでは、字幕の左側に旗を浮かせようとしています

フラグを適切にレイアウトすることができないようです。そうするための最良の方法は何ですか? また、フラグの高さを設定して、その中のテキストをしっかりと折り返すにはどうすればよいですか?

コンテナーの DIV の高さを強制的に 2 つのフローティング div の子に対応させることはできますか? それを行うために使用できる派手なトリックはありますか？親 div 内に同じサイズの 2 つの div を作成しようとしています。それらの間に少し空白を入れて並べて表示したいと思います。Child2 は飛び出し、Child1 の下に移動する傾向があります。メモ Child2 にはテーブルが含まれています。浮いていいの？

HTML:

CSS:

これで私を助けてください。パーセンテージ幅を使用してレイアウトを作成する必要があります。100% 幅のラッパーがあります。

これで、DIV (メイン ラッパー.. 94% 幅のパーセンテージを維持したい.. 100% ボディの 94%) ができました。

これを簡単にするために。

-> BODY 100%幅設定

--> コンテナ 94% 幅

---> FIRST CHILD DIV 70% float left (コンテナの 70%)

---> 2 番目の子 DIV 30% フロート右 (コンテナの 30%)

しかし、FIRST CHILD DIVの下に2つの等しい列があります

-----> 50% および 50% パーセンテージ幅

バグは次のとおりです: ie7.. では、最後の列が下部に表示されます.. 適切にフローティングされません.. 幅を 29.9% に減らすと !!! それは動作します..パーセンテージ幅または何かを扱う際にie7にバグがあると思います..これについて明確にしてください。css / htmlが長すぎるので、問題が解決することを願っています..一般的な問題であることを願っています.. :(

これがこの DIV の CSS です。お役に立てば幸いです :)