問題タブ [clearfix]

現在、背景画像のサイズがカバーの Web ページがあります。この div 内に高さ 100% の 2 つの div が必要です。これらの div はレスポンシブである必要があります。下部に画像を配置するには、左側の div が必要です。メイン コンテナで clearfix を使用していますが、クラスの画像はまだコンテナ 1 まで上がっています。

HTML

CSS

Chrome 27.0.1453.93 と Ubuntu 13.04 を使用しています

またはに設定されcontenteditable="true"た on 要素があり、この要素の親にクラスがある場合、どこかをクリックした後にコンテンツが編集可能になると、奇妙な動作が見られます - http://jsfiddle.net/sApBk/2/。floatleftrightclearfix

バグは Chrome にのみ存在しますが、FF と Opera で表示すると問題ありません。

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

ブロック スタイルのメイン ナビゲーション用の CSS リボンを作成しようとしていますが、「display:table;」を含めると、リボンの右側の三角形が機能しません。または「display:block;」クリアフィックスで。当然、Clearfix を外すと、リボンは正常に機能しますが、ラップが消えます。リボンが機能し、Clearfix を使用してラップが崩れないようにすることは素晴らしいことです. どんなヒントでも大歓迎です！

元のコードと、私の作業に基づいた画像は、http: //jsfiddle.net/necolas/xCfeH/にあります。

ここに私が書いたHTMLがあります：

CSSは次のとおりです。

サイドバーが固定され、メイン コンテンツ コンテナーが流動的なレイアウトがあります。

http://jsfiddle.net/QzsL5/2/

クラス「グループ」をフィードのulに適用すると、 ulの高さに余分なピクセルが追加され、 liがその中にラップされるだけではありません。しかし、サイドバーを削除すると、この余分な高さが表示されなくなります。ulの下部がサイドバーの下部と揃っていることに気付きました。

なぜこのように振る舞うのかわかりません。これに関するヘルプをいただければ幸いです。

ありがとうございました ：）

これ ( http://jsfiddle.net/77RRA/1/ ) は機能していますが、これ ( http://jsfiddle.net/77RRA/ ) は機能していません。

clearfix は行を置き換えることになっていません<div style="clear: both;"></div>か?

多くの div に clearfix を適用するのに問題がありました。こことここにあるいくつかのチュートリアルに従いましたが、Bar という名前の div はロゴとナビゲーション div の両方を保持するように拡張されません。

これが私のマークアップです。あらゆるアドバイスをいただければ幸いです。div をいくつかの奇妙な色にして、div がどこで終了しているかを確認しやすくし、何が起こっているのかを正確に確認できるようにしました。

CSS:

私は自分のウェブサイトにレスポンシブ スケルトン フレームワーク (ボイラープレート) を使用しています (ここから入手できます: http://www.getskeleton.com/ )。

<ul>高さの異なるリスト列があります。ネストされた列をクリアするには、CSS は、.clearfixクラスを親要素に配置する必要があると言います。

クラスを配置しようとしましたが、ネストされた列はクリアされません。リストアイテムを使用しているため、要素<ul>を配置したり、要素の中に入れたりすることはできません<ul>。

これに対する解決策はありますか？

私のhtmlコード:

Skeleton CSS では、最初の列の高さが 500px で、(d) と (e) の列を一番下/2 行目に移動するか、ネストされた列をクリアする必要があります。

別の行に移動するたびに別の行を空にすることを考えて<li class="clear"></li>いますが、それは機能しますが、別の解決策を探しています。空の追加よりも適切なもの<li>

ありがとうございました。

私のウェブサイトにはヘッダーとメニューバーがあります。次のように、それらを互いに水平に貼り付けて配置したいと思います。

しかし、何が起こるか：

私のヘッダーのコード:

ヘッダーの CSS コード:

私のメニューバーのコード:

メニューの CSS コード:

clearfix CSS コード:

どちらもフロートを使用しているため、メニューバー項目がヘッダー項目と同じ水平レベルにあるときはいつでも、間違った方向に配置され始めます。

class: clearfix を使用する代わりに、次のようにそれらの間に div を入れてみました。

私の問題は、両方のソリューションがメニューとヘッダーの間に空のスペースを作成することです。また、すべてのマージン、パディングなどを 0 に設定しようとしましたが、それは役に立ちません。

// 編集: div スタイルをいじる 両方をクリア: http://jsfiddle.net/XJ3QE/3/ スクリーンショット:

// 編集: Chrome 28 のスクリーンショット

私には少し奇妙に見えるTwitterのブートストラップに問題があります。左側に固定されたサイドバーとメインエリアがあります。

メインエリア内には、左引きと右引きのコンテンツがあり、clearfix によってクリアされます。

問題は、clearfix-div の下のコンテンツが sidebar-content よりも下に移動されることです。

私はこれのためにフィドルを作りました: http://jsfiddle.net/ZguC7/

「オーバーフロー: 崩壊」を #main に設定することで問題を解決しましたが、理解できません。誰かがこの問題の原因を説明できれば非常に嬉しく思います。

固定レイアウトでニコラス ギャラガーのマイクロ クリアフィックスを使用しています。私のレイアウトでは、緑色のフッターは表示されません。これは、clearfix が正しく機能しないことを意味します

CSS

とマイクロクリアフィックス

デモ

私は何を間違っていますか。どうすればこれを機能させることができますか。誰か助けてください