問題タブ [css-float]

私は、1 つの画面にマスター レコードを表示するレコード管理 Web アプリケーションを持っています。AJAXes は動的にエディターをエディター div に組み込み、JQuery を使用してドラッグ可能にしました。それはうまくいきます。

div はウィンドウではありませんが、もう少しウィンドウのように振る舞うのは良い考えかもしれないと思ったので、「閉じる」ボタンをコーディングしました。構造は次のようになります。

Editorbody は、ユーザーが何を入力しようとしているかに応じて可変サイズです。

ドラッグハンドルの幅はエディタの 100% に設定されています。Closebutton は CSS で として設定されfloat:rightます。

私の問題は、IE6 と IE7 では、閉じるボタンが右に浮きすぎていることです。エディターの div をどこにドラッグしても、常にウィンドウの右端にあります。Firefox と Safari では、私が期待していたように見えます。ウィンドウはエディター本体と同じ幅で、閉じるボタンは右上隅にあります。

私は特に float:right に執着しているわけではなく、すべてのブラウザーで同じ結果が得られるように CSS を設定する方法を探しているだけです。何か案は？

「スクリーンショット」

これは私がjsbinでやりたいことのモックアップです（ありがとう、redsquare）

サンプルコード

法的に機密性の高い情報を扱っているため、アプリのスクリーンショットを提供できません。ただし、いくつかの写真を撮り、テキストとインターフェイスをブロックして、ウィンドウ構造だけを残しました。

IE7 での表示

Firefox 3 での表示

InternetExplorerでプレゼンテーションの問題が発生しました。次の単純なコードブロックは、Safari、FireFox、Chrome、およびOperaで期待されるとおりにレンダリングされます。ただし、IE6とIE7の両方で、左右のフロートDIV要素の間に顕著なスペースが生じます。

私の質問は、同じCSSがIEと私が言及した他のブラウザーの両方で機能するようにfloatを実現するためのより正しい方法はありますか？そうでない場合、Internet Explorerのスペースを取り除くための最良のアプローチは何ですか？

ありがとう、マット

これはコミュニティウィキなので。プランBによって以下に提案されたソリューションを使用して作業コードを投稿すると思いました。

float を使用して CSS に 3 つのアイテムを配置したいと考えています。

1. 左上 -- ロゴ
2. ロゴの右側にあるナビゲーションは、順序付けされていないリストです。つまり、左側にフローティングします。
3. 右上には、ニュースレターに登録するための 2 行のフィールドがあります。一番上の行とフォーム フィールドをコピーし、2 番目の行に送信の下部を配置します。

それぞれに独自の Div タグを付けましたが、float で動作するように見えません。サイトのサイズが変更されたときに見栄えがよくない絶対配置のみ。現在、div 内にテーブルを配置していますが、純粋な CSS ソリューションが大好きです。

ロゴを左にフロートさせ、サインアップ フィールドを右にフロートさせることはできますが、ナビゲーションを適切に配置できないようです。左端まで入れるか、クリアを入れてロゴとフィールドの下に入れます。

任意の提案をいただければ幸いです。

次のコードは、FF3 では適切にレンダリングされますが、IE7 では機能しません。誰かがそれを修正する方法を知っていますか?

左に 4 つのdiv要素が浮かんでいます。3つ目divはクリア。
Firefox と Chrome では、要素は期待どおりに配置されます。1 番目と 2 番目divの は互いに隣接しており、3 番目と 4 番目divの も互いに隣接しています。
一方、IE7 は 4 番目を 1 番目と 2 番目の s にdiv隣接させ、3 番目を下に配置します。divdiv

br2 番目の後に要素を追加することで修正できることはわかってdivいますが、必要がなければマークアップを編集したくありません。問題を解決するよりエレガントな方法はありますか?

私はしばらくの間、修正を求めて Google を試してきましたが、問題がどれほど初歩的なものに見えるかを考えると、驚くべきことに見つかりませんでした。このような単純な CSS の問題を一覧表示している参照サイトはありますか、それとも基本的な CSS について無知なだけですか?

編集: Nazgulled が問題を「解決」した後、サンプル コードを少し複雑にしました (コメントを参照)。3 つではなく4 つdivの sがありdiv、2 つ目の代わりに 3 つ目がクリアされます。

完全なソースコードは次のとおりです。

Chrome では次のようになります。

IE7 では次のようになります。

CSS で一見単純に見えることをしようとするたびに、うまくいきません。

460x160 の画像を含むコンテンツ div があります。私がしたいのは、画像を右下隅に配置し、テキストをその周りに折り返すことだけです。

だから私はそれが次のようになりたい：

左上または右上の画像でそれを行うのは簡単です:

では、どうやってそれを底に押し込むのですか？これまでに思いついた最高のものは次のとおりです。

この場合、テキストは余白に印刷されないため、画像の上に余白があります。

この場合、テキストは画像の上または下に印刷されます。

それで...どうすればこれを達成できますか？

フローティング HTML 要素は、コンテナの高さを拡張しないようです。たとえば、次のコードを考えてみましょう。

灰色の背景を持つ包含 div が赤い div よりも短く、赤い div がコンテナの境界の外に伸びていることに注意してください。フローティング要素を含め、包含要素をそのコンテンツのサイズに拡張したいと思います。

これを達成するためのエレガントなソリューションはありますか?

3列のWebページを作成しています。真ん中の列は、すべてのコンテンツが入る場所です。入力するコンテンツは、左揃えの画像の形式で、画像の横にテキストが続く必要があります。そして、これはさまざまな画像と対応するテキストで列全体に流れます。私のレイアウトはdivベースのレイアウトなので、列にメインdiv（page_content）を配置しました。次に、見出し（h4）と見出しの下に、別のdivを入力しました。このdivには、画像の場合はdiv（クラス写真）、テキストの場合はdiv（クラスlat_art）でネストされた個々のdivが含まれます。HTMLコードとCSSコードを以下に示します。私の問題は、最初の画像とテキストが表示されますが、その後は最初のテキストの下に垂直に並んでいます。つまり、divの50％のみを占めて右に浮き、対応するテキストを同じ50％のスペースでその下に押し込みます。個々のdivの高さを指定する必要がある場合、おそらく画像はテキストよりも大きくなります。しかし、そうしてもコードは静的になりません。ダイナミックにしたいと思います。助けてください。

HTMLコード

外部スタイルシートからのコード