問題タブ [clearfix]

「ul」の高さに依存して、含まれる「div」のサイズを変更するjqueryスクリプトがあります。

私の 'li' 要素に 'clear:left' がないと、それらの親の 'ul' の高さは 1 'li' になります。

「float:left」「li」要素に「clear:left」を指定すると、構造が失われます。

「clear:left」のない DOM を次に示します。「li」要素は完璧な位置にありますが、div はそれらに合わせてサイズ変更されていません。

jsfiddle.net/63pNN/35/

「clear:left」を使用した DOM を次に示します。リストの高さに合わせて div のサイズが変更され、「li」要素が重なっています

jsfiddle.net/63pNN/36/

どんなアイデアも役に立ちます！めっちゃ近い……！

ありがとう

より簡単な使用方法はあります.clearfixか?

年：

私の新しい明確な修正：

これをバリデーターに通しましたが、エラーはありませんでした。これが使用できない理由を知っている、または見ている人はいますか? 3行のコードと を保存するだけです.が、それでも.

フッターの上にある clearfix div を削除すると、Firefox の場合と同様に、テキストが所定の位置に収まります。

しかし、それは他のものを壊します。そのclearfixがフッターにどのように影響するかはまったくわかりません...

マイページ:

http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx

まず、非常に明確にするために、ここで私が達成しようとしていることを示すJSフィドルを示します。

http://jsfiddle.net/bb_matt/VsH7X/

ここに説明があります-私の理論的根拠：

1140グリッドフレームワークを使用してレスポンシブサイトを作成しています。かなり複雑なレイアウトです。

定義された任意の列サイズにドロップできる再利用可能なシンプルなギャラリークラスを作成し、メディアクエリを使用して、関連するパーセンテージ幅をli要素に適用します。各li要素の右マージンは5％です。メディアクエリでnth-child（xn + x）を使用して、各行の最後の右マージンを削除しています。

すべてがうまく機能します-レイアウトのサイズが変更されると画像のサイズが変更され、行のギャラリーアイテムの数はパーセンテージに基づいて定義したとおりに機能します。

修正すべき唯一の残りの問題は、行間をクリアすることです。HTMLマークアップを追加できません。また、過度に複雑なjqueryの修正を避けたいと考えています。

私はこれを修正する2つの方法を知っていますが、どちらにも熱心ではありません。

最初の修正は、単にdisplayを使用します。li要素のインラインブロックを上に垂直に配置すると、すべてが正しく流れます...ただし、すべてのパーセンテージが撮影され、ギャラリーアイテムが割り当てられたスペースにうまく収まりません。

2番目の修正では、リストアイテムに高さを指定します。これは私が必要に応じて下るルートです-解像度に応じて異なる高さが必要になります-大したことではありませんが、それほどきれいではありません。

だから私がやろうとしているのは、jqueryでクリアフィックスまたはマイクロクリアフィックスのいずれかを適用することです。その理由は、私は CSS にアクセスできないため、jquery を使用してすべてのクラスとその他の CSS 関連のニーズを作成しています。これは本当に私ができていないことの 1 つなので、助けが必要です。

両方の方法: clearfix

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

疑似手法を使用しますが、これをjqueryに適用する方法がわかりません。私はやっている

伝統的に私のCSS用ですが、スタイルシートにアクセスできないため、Jqueryのみを使用してこれらを定義する必要があります。これを行うための賢い方法を思いつくことができれば、確かにそのようである必要はありません。奇妙な要求ですが、それは仕事の制限です。事前に助けてくれてありがとう.

互いにインラインになるようにフロートしたい 5 つのセクション タグがあります。過去に float / clearfix 手法を使用したことがありますが、うまくいきました。私は自分が間違っていることを理解できません。

親要素が子の高さと幅に拡張できるように、いくつかの要素をフロートさせて clearfix を適用しようとしています。

したがって、このフィドルに従ってレイアウトを設定するだけです: http://jsfiddle.net/fMjEx/

次に、要素を の中にフロートさせたいと思いました.bar。これは通常、非常に簡単です。

1. 要素をフロートします。
2. pie-clearfixまたはを使用して親をクリア修正しoverflow: autoます。

ただし、次の問題に遭遇しました。

• pie-clearfix を使用すると、.picture次の要素.barもクリアに含まれます: http://jsfiddle.net/6C7WD/

• overflow: autoまたはを使用するoverflow: hiddenと、 の幅が.barドキュメントの幅にまたがりません: http://jsfiddle.net/fv2gA/

最初に、私が持っていた1つの解決策は、作ることでし.picture position: absoluteた. ただし、このアプローチの問題は、要素がフローから取り出されることです。

レイアウトでは、.bar中のコンテンツに応じて の高さが可変です。と を指定して、 またはの高さが大きいかどうかに応じて、それらの後に来るものはその量だけ下に押し出されるようにします.bar。.picturemargin-bottom.bar.picture

これは、ソリューションとしてposition: absoluteonを使用することを除外し.pictureます。

以下を満たす解決策はありますか？

• 内のフロートのみをクリアします.bar。
• フローから要素を削除しません。

IE9（またはその他の最新のブラウザー）で次のWebサイトを表示すると、私が求めている効果がわかります。ただし、IE8以下で表示すると、男性の写真を含むヘッダーDIVは、高さが0のように見えるものに折りたたまれます。min-heightとclearfixを試しましたが、灘です。

http://www.adrianwaddingham.com/

私の問題は次のとおりです
。ボーダーは、含まれているアイテムをラップしません。これは、コンテンツ項目を絶対位置に配置しているためだとわかっていますが、レイアウトが機能するには絶対位置にする必要があります。これは、clearfix ソリューションを使用できないことも意味します (これは、オプションではない要素をフロートする必要があることを意味します)。
私の質問は、親 div に含まれる要素の高さを取得する方法です。

編集: Javascript ソリューションなし、CSS のみ

HTML:

CSS:

</p>