問題タブ [css-float]

このリンクの下で指定されているように、誰かが複雑なタイルレイアウトをおかしくするのを手伝ってくれませんか?

ウィジェットに float:left を使用しようとしましたが、赤いブロックが常に #2 の下に表示されます。黒いダッシュボードにウィジェットを動的に追加できるはずです。html5、css3、jquery を使用できます。

2列だけではありません。ダッシュボードに 3 番目、4 番目などの幅に空きスペースがある場合は、そこにあるはずです。サイズの異なるウィジェットが 1 つから無限に存在する可能性があります。自由な幅のスペースがない場合、新しいウィジェットは左にフロートし、自由なスペースを完全に埋める必要があります。

マークアップの失敗:

追加のモックアップ: img191.imageshack.us/img191/2139/picture2fdi.png

私は手動でコード化されたサイト @ hartbro.com を持っています。サイトの一部はブログで、そこには写真が含まれています。問題を引き起こしている画像の 1 つを囲む HTML コードを次に示します。

私が気付いたのは、複数の画像を含む一部のブログ エントリで、2 番目の画像が本来のように浮かんでおらず、テキストがその周りを囲んでいることです。私が持っているいくつかの CSS との何らかの競合が問題の原因であると考えていますが、それが何であるかを理解することはできません。

FF と IE ではどのように動作するかわかりませんが、Chrome や Safari では動作しませんか??

関連するすべての CSS を次に示します。他に何か必要な場合はお知らせください。前もって感謝します。

div ブロックのリストを、高さが異なる 2 列で並べて、互いに浮かせようとしています。すべてのブロックのサイズが固定されている場合、それらは自然に互いにきれいに積み重ねられますが、これにはさまざまな高さが含まれるため、背の高いブロックの場合、次のブロックに進む前に、隣接するブロックの下に多くの空白スペースができます.

ただし、これは片側でのみ発生することに気付きました。ブロックが左に浮いている場合、右側の列のブロックが空白を自動的に埋めます。逆の場合も同様です。

しかし、私は現在、両側の流動性を達成するための解決策を模索しようとしています.

ここで私が意味することの例を見ることができます。

2 列目のすべてがうまく収まっていますが、左側には背の高いサイズの空白スペースがたくさんあります。

CSS は次のようになります。

私がここで取り組んでいるウェブページには、メインdivがあり、メインdiv内にあり、画像divがあります。大まかに言えば、重要なHTMLは次のとおりです。

およびCSS：

問題の原因がここのコード内にない場合はお詫びしますが、そうだと思います。

問題は、imagesdivがdivの内容よりも大きくなると、maindivのwrapper左側のパディングが失われることです。との下部のパディングがmain増加します。この問題はIE7でのみ発生するようです。

「フロート」が行うことを実行しようとしていますが、コピーには選択できません。これは、これがどのように使用されるかの例です:

これにより、関連テキストのすぐ右にあるボックスのような「付箋」が作成されます。コピーするテキストを選択すると、メモもコピーされ、テキスト フローが壊れます。

これを修正する方法はありますか？

みなさん、問題のサイトは次のとおりです。

http://www.myvintagesecret.com/

トップページにたくさんの投稿があります。H2 タグのヘッダー。そのほかに、Clip という div を作成することがあります。そこに.clip divがある場合、タイトルを次の行に折り返す必要があります。

私の問題は、.clip div があり、十分な長さのタイトルがある場合、.clip div が押し下げられることです。H3 をラップして .clip を 1 番目の投稿のように表示したい。

divに2つのスパンがあります。それらを並べて配置したいと思います。私はそれらを左右両方に浮かせることによってこれを行っています。問題は、これらのスパンの高さが可変であるということです（[その他のオプション]をクリックすると、スパンが下にスライドします）。したがって、実行時に（下にスライドして）高さが変更されても、その下の要素は押し下げられません。それらを浮かせずに整列させる方法があれば、それはうまくいくでしょう。

私がこれを最初にやったわけではないと確信しているので、これは以前にカバーされていたに違いないと確信していますが、答えを見つけることができません。<div>繰り返し背景画像を使用してシャドウ効果を作成しています。下の2つのコーナーでは、9x5ピクセルの小さな画像を使用しています。私はそれらを左右に浮かせます、そしてFirefoxとSafariではそれらは完璧に見えます。IE8（および場合によっては他のIE）では、左右に約3px浮きすぎます。

あなたはここで問題を見ることができます。それは私の妻のためのebayテンプレートです。

これまで、同様のIE6の問題を修正したdisplay：inlineを設定してみました。また、画像の余白とパディングを0pxに設定してみましたが、うまくいきませんでした。

何か案は？

ありがとう、Carraig

フロートされたブロックレベルの要素をクリアするのに最適な要素は何だろうと思っていましたか?

今のところ、私は主に div または ap 要素を clear: both; とともに使用しました。適用。

どの要素が好きですか、それを行うための「ベストプラクティス」のようなものは何ですか?

<hr>上下に余白のある「クリア」タグがあります。ただし、2つの浮動要素を列として使用した後は、上マージンは無視され、行はテキストのすぐ下に配置されます。

CSS：

HTML：

divの列をでラップできることがわかりましたがoverflow: hidden、HTMLにマークアップを追加する必要がない解決策はありますか？