問題タブ [css-float]

基本的な CSS について、理解できない、または答えが見つからない質問がいくつかあります。

まず、別の div タグ内に 3 つの div タグを配置してみました。他の 3 つのタグを含む最初のメイン div タグには、サイズ以外は何も設定されていませんでし400pxた400px。内部の他の 3 つの div のうち、すべてが20pxby20pxで、1float:leftつが assigned で、他の 2 つが右にフロートするスタイルが割り当てられています。すべての属性はスタイル内で定義され、2 つの div にfloat:rightは同じスタイルが割り当てられました。私の問題は、コードの最後にある 2 つの div のうち、ブラウザーに最初に表示されることであり、その理由がわかりませんでした。

コードは次のとおりです。

私は、ビデオとコメントを並べて表示するYoutube ユーザー スタイル スクリプトに取り組んでいるので、ビデオを見ながら同時にコメントを読むことができます (なんて素晴らしいアイデアでしょう - 当然)。スクリーンショットで、私がどこまで到達したかを確認できます。つまり、私は Firefox だけに関心があり、CSS3 は問題ありません。

私が抱えている問題は、完全に流動的なレイアウトを作成し、「他のビデオ」div を右にフロートさせ、中央の div (コメント) を伸ばして左の div (再生されたビデオ) 間の残りのスペースを埋めたいことです。右の div (「その他の動画」)。

CSS に変換すると、問題は次のとおりです。div が「main」、「rightnav」、および「footer」の場合、ドキュメント内でこの固定された順序で、rightnav div を右にフロートさせ、フッターをその下に配置するにはどうすればよいですか? 私がなんとかした最善の方法は、「rightnav」（右：0）を絶対に配置することでしたが、フッターは両方の下ではなく、「メイン」divの下に移動しました。CSS を使用して DIV の並べ替えを既に確認しました。「メイン」div の内容に依存するため、負の「トップ」値は除外されます。

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

2 つの div の下の「フッター」と「メイン」の div 流体です。

アイデアをありがとう。

ページ上部の右に div をフロートさせたい。50px の正方形の画像が含まれていますが、現在、ページの上部 50px のレイアウトに影響を与えています。

現在、その:

それが答えだと思ってz-indexを試してみましたが、うまくいきませんでした。

欠けているのは単純なことだとわかっていますが、それを釘付けにすることはできません。

float:right(またはleft) を何度も使用して、コンテナーの上部に画像と挿入ボックスを浮かせました。ここで、通常のテキスト ラップを使用してdiv別の右下隅にa をフロートさせる必要があります(テキストは上と左のみにラップされます)。divfloat

float価値はありませんが、これは比較的簡単に違いないと思いましbottomたが、多くの手法を使用してそれを行うことができず、Web を検索しても絶対位置を使用する以外に何も思いつきませんでしたが、これは正しいワード ラップ動作。

これは非常に一般的なデザインだと思っていましたが、どうやらそうではないようです。誰も提案がない場合は、テキストを別々のボックスに分割してdiv手動で配置する必要がありますが、それはかなり不安定であり、必要なすべてのページでそれを行う必要はありません.

Web ページに「ワークフロー」バーを作成しようとしています。

ワークフロー内のアイテムは、長さが異なる場合があります。

画面の幅を埋めるのに十分なアイテムがある可能性があるため、フローを次の行に折り返す必要があります。

これを行うために、左フローティング div を使用しています。

ただし、divには適切な量の画面幅をとってもらいたいです。

1 つの行に 3 つのアイテムしか収まらない場合は、個々のアイテムの幅を考慮して、それらのアイテムが行に均等に収まるようにします。

現時点で取得できるのは、行の最後の div が残りのスペースを埋めることだけです。これは、多くの場合、アイテムがすべて左揃えであることを意味します。たとえば、次のようなレイアウトを取得できます。

しかし、私は実際には次のようにしたいと思っています:

私の言いたいことがわかるなら。

これには、フローティング div ではなくテーブルを使用する必要がありますか?

div を互いに入れ子にしていて、内側の div の 1 つが浮かんでいる場合、外側の div はその周りに展開されないことがわかり続けています。

例：

内側の div をカバーするには、外側の div に何をする必要がありますか? IE: 境界線/背景色を全体に配置しますか?

また、私がここでぶつかっている一般原則はありますか? もしそうなら、それが何であるかをしっかりと理解するには、何を調べればよいでしょうか?

ありがとう！

編集

こんにちは、みんな、

答え、意味的に正しい、いいえ、そしてリンクをありがとう。

私は最終的な作業でオーバーフローを使用することになりますが、Ant P の回答は受け入れられたままにします。これは、実際に機能した最初の回答であり、意味論的感覚を害したとしても、短期間のジャムから抜け出すことができたからです。

まともなcssレイアウトに移行しようとしている長年のhtmlハックとして、私は確かに意味的に間違ったハックを使用して仕事を成し遂げることを理解し、共感することができますが、彼はこの後にその習慣を変えると確信しています= o)

私は次のHTMLを持っています

テキストは画像の周りに浮かびません。ブラウザはIEでもFirefoxでも構いません。

画像の周りに浮かぶようにこれを修正するにはどうすればよいですか?

ページhttp://tesselaar.com/gallery/で、IE7 では表示されない「フォト ギャラリー」ページの上部に見出し (レベル 1) があり、その理由がわかりません。

サイトの残りの部分と同じ CSS とページ構造に従います。唯一の違いは、要素が直後に右にフロートされることです。

任意の洞察をいただければ幸いです。

私は NAV と呼ばれる div を持っており、NAV の内部には 5 つの li を持つ UL があり、左にフロートしています。これは、NAV が崩壊するかどうかを確認するために NAV の周りに境界線を置いているためです。これが例です。

折りたたまれた http://img401.imageshack.us/img401/8867/collapsedze4.png

折りたたまれていません http://img71.imageshack.us/img71/879/nocollapsedkx7.png

最初の画像でわかるように、NAV div のリンクは左に浮いており、その上の黒い境界線は NAV と呼ばれる実際の div です。

この画像では、上下の境界線があり、折りたたまれていないことがわかります。

ここに私が使用したhtmlとcssの一部があります。

代替テキスト http://img301.imageshack.us/img301/5514/codejc8.png

テキストボックス、ドロップダウンリスト、送信ボタンがあるとします。それらはすべてインライン要素です。つまり、「公式に」マージン、パディング、幅、高さのプロパティは無視する必要があります（実際にはそうではありません）。高さをボタンに設定する正しい方法を実行する場合は、display：blockのように記述してから、高さを定義します。ただし、ブロックレベルの要素が予期せず拡張されるという考慮事項があるため、幅を固定値に設定することをお勧めします。問題は、ボタンのテキストに基づいて動的に定義できるため、幅がわからないことです。

別のシナリオ：とを使用してメニューを作成したいと思い<ul>ます<li>。いくつかのアイテムを左にグループ化し、いくつかを右に伸ばして、水平に配置したいと思います。<ul>とは両方とも<li>ブロックレベルの要素です。メニューに使用可能なすべての水平方向のスペースを取り、アイテムの高さで遊んだり、メニューアイテムを両側に押したりしたいので、ブロックモードで問題ありません。タスクを実行するには、float：leftとfloat：rightを使用します。ただし、メニュー要素はブロック要素であるため、メニュー要素に幅を設定する必要があります。アイテムのテキストが異なる可能性があるため、幅はわかりません。しかし、すべてがそのままうまくレンダリングされているようです。

フロートや幅を設定せずにブロック要素としてレンダリングするように強制された両方のインライン要素、またはリストアイテムの例に問題があることに気づきませんでした。IE7、FF3、Opera 9、Safariでは、現在のバージョンに関係なく問題なく動作します。問題は残っています：これらのインラインからブロックへの要素または実際のブロック要素が浮いているのに幅が設定されていないことを心配する必要がありますか、それともすべてをそのままにしておく必要がありますか？私は何かが足りないのでしょうか、それとも単に正しくなると期待してはいけないものの1つに過ぎないのでしょうか。