問題タブ [clearfix]

ヘッダー、フッター、メインコンテンツを間に入れるシンプルなレイアウトに取り組んでいます。しかし、何かが私を少し悩ませています。ヘッダーhttp://www.reversl.net/before/の下に画像を含めると、すべてが希望の場所に正確に配置されます。しかし、画像を削除すると、ここに示すように、ヘッダーがページの上部からマージンを与えますhttp://www.reversl.net/after/フロートされたヘッダーに関連していて、フロートされたコンテンツがクリアされていないことを推測しています。しかし、私はclearfixハックを含めましたが、それは状況を変えていないようです。何か案は？

わかりました、クライアントの 1 人のためにサイトをリマスタリングしています。何年もの間、CSS に関する限り、少し古い方法で作業を行ってきました。私はいくつかのことを読んで、clearfix と呼ばれる方法を見つけました。それについて読んで以来、試してみたいと思っていました。

試してみると、要素を中央に配置する方法が機能していないことがわかりました

通常は中央に配置しますmargin:0 auto;が、clearfix を実装すると機能しなくなります。だから今、私は同じロジックを適用する手段を探していますが、方程式に clearfix を保持しています。新しいブラウザーで動作するものをいくつか見つけましたが、古いブラウザーで動作するかどうかはわかりません。他のことをするために何かをハッキングすることなく、これを可能な限りクロスブラウザーに準拠させようとしています. それが、私がサイトをリマスタリングしている多くの理由の 1 つです。準拠している、新しいきれいなコード ベースが必要です。

参考までに、これは私が使用しているclearfixの方法です http://www.webtoolkit.info/css-clearfix.html

*コードを表示するように編集*

前述のように、主要な包含要素は、clearfix クラスを適用すると「中央」の位置を失います。私の理解によるクリアフィックスの全体的なポイントは、その中に浮動要素を持つ親要素を取ることであり、要素をその中の最大の浮動要素の高さに合わせて調整することです。これが機能する場所では、margin:0 auto; が必要だと思います。提供されたクラスを介して同じ要素でそれ以外の場合は無視されます

HTML を作成しましたが、http://temp87.web44.net/temp.htmlにあります。私が直面している問題は、フッターの後にページの下部に灰色の帯があり、ページがブラウザーの 100% を占めていないことです。

問題を引き起こしているCSS..

問題2：高さも欲しい

画面の解像度に合わせて自動的にフィットします。現在、計算された高さは常に 619px であり、大きなモニターではページ全体が画面の 75% しか占有しません。

このスクリーンショットに示すように、WP Disqusの公式プラグインコメントとそのソーシャルバー（いいね/嫌い/設定）の間に大きな空白があります：http：//i.imgur.com/RjRs6.jpg 偶然にも、空白はここで終わります右側のサイドバーが終了します。Firebugが示すように、disqus_threadまたはdisq-contentには、このグリッチの原因となる何かがあります。個人のstyle.cssclearfixコードを削除するか、height：0を削除しようとしましたが、何も変更されませんでした

私のブログ（つまり、 http：//www.flapane.com/blog/2010/11/rai-rinuncia-ad-acquistare-diritti-champions-league/）のどの投稿でも、「ライブ」で見ることができます。投稿自体とDisqusのコメント。

ヒントはありますか？前もって感謝します

フロートのグループをクリアする最も一般的な方法はclear:both;、親の:after疑似要素で使用することです。たとえば、次のようになります。

これはほとんどの場合問題なく動作しますが、浮動要素内に浮動要素がある場合は失敗します。子フロートだけでなく、すべてのフロートをクリアします。

追加することによる修正の可能な方法

しかし、これには望ましくない副作用が生じる可能性があります。

ページ上のすべてのフロートではなく、子フロートのみをクリアする方法はありますか?

順序付けられていないリストがあり、各リスト要素には写真と見出しが含まれています。私のCSSは、グリッドをグリッドとして設定します。各行には3枚の写真が含まれています。見出し（または写真のキャプション）が写真の幅より長く、2行にまたがる必要がある場合があります。状況によっては、テキストが2行以上にまたがる場合、その下のリスト要素が右にプッシュされ、リストに大きなギャップがあります。私にとって有効な唯一の修正は、 3つの要素<div style="clear:both"></div>ごとに次のHTMLを追加することです。<li></li>この問題は、リスト要素の3行目に見られます。この問題を調査しようとしましたが、CSSのみの方法は見つかりませんでした。サンプルコードでは、CSS clearfixクラスを適用しましたが、効果がないようです。

最新バージョンのGoogleChromeを使用しています。

これが私のコードです：http：//jsfiddle.net/NVveP/1/

私はグリッド 960 を使用していて、clearfix を機能させることができませんがclear:both、要素に使用すると、目的の効果を得ることができます。(通常) 信頼性が高いため、clearfix を使用することをお勧めします。

以下のコードでは、ヘッダー セクションに左のロゴ領域と右のバナー領域があり、その下にナビゲーション バーがあります。

このナビゲーション バーは、私が苦労している要素です。要素に追加style="clear:both;"すると、正常に動作します。navただし、ヘッダー要素で clearfix を使用すると機能しません。

動かないページはこちら（clearfix使用）

これが機能するページです（clear：bothを使用）

HTML

明らかに明らかな悪いことをしていないことを願っていますが、それを見ることはできません。

これはとても単純なことのように思えるので、申し訳ありません。

次の要素が改行にあるように改行を挿入する正しい方法は何ですか? これを自動的に行うもの ( <p>` 内など) があるようですが、次の要素が最後の要素のすぐ隣に表示されるという動作が見られます。

HTML:

ulまたはのようなものの後に改行を処理する正しいまたはエレガントな方法は何divですか? これを処理するコードの一般的なセットアップを見落としていますか?

問題は次のとおりです。左側にあるように、フロートされた要素は整列していません。右側では整列しています。

http://i.stack.imgur.com/Qx8Zs.jpg

これは常に発生するわけではなく、ブラウザ固有ではありません（AFAIK）-更新時に自動的に修正されます... clearfixの問題だと思いますか？以下のCSS。

cssレイアウトプロパティを明確に読みました

しかし、css プロパティなどの clearfix についてはどうでしょうか。

フロート レイアウトに使用できます。

しかし、私はcss clearfixについて説明したいですこれはcssのプロパティですか、これはユーザー定義クラスですか、それとも何ですか

私は質問の仕方が紛らわしいことを知っています

しかし、知りたいのはclearfix iscssクラスまたはユーザー定義です

ありがとう