レイアウトを維持しながら、オーバーフローで非表示のコンテナーの要素の可視性を維持するにはどうすればよいですか?

オーバーフロー非表示コンテナーでの要素の可視性の維持

CSS で、親コンテナーに overflow:hidden を設定すると、高さに基づいて展開できるようになります。浮いている子供たちの様子。ただし、この機能には制限があり、特にコンテナ内の子のマスクに制限があります。

この問題は、ユーザーがコンテナの外の要素の可視性を維持しながら、フローティングの子を持つコンテナの左右の中央揃えを維持したい場合に発生します。 overflow:visible を使用すると、マスキングの問題は解決されますが、レイアウト フローが中断されます。

解決策 1: Clearfix を使用する

解決策は、clearfix テクニックを活用することです。子をマスクしない overflow:hidden のレイアウト保持動作。 CSS コードは次のとおりです。

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */</code>

clearfix クラスを親コンテナに適用し、overflow:hidden を削除します。これにより、子が表示されたままレイアウトが保持されることが保証されます。

解決策 2: Overflow-Visible でフローティング兄弟レイアウトを保持する

別のアプローチは、オーバーフローを使用することです。絶対配置を使用して子要素をコンテナの外側に表示し、戦略的に配置します。ただし、兄弟の float のようなレイアウト フローを維持するには、次の手順が必要です。

1. 子要素を位置: 絶対に設定します。
2. 次の基準に基づいて子要素の正しい位置を計算します。親の幅と兄弟の位置。
3. 親のサイズの変更に応じて子要素の位置を動的に調整し、兄弟との位置を揃えます。

以上がレイアウトを維持しながら、オーバーフローで非表示のコンテナーの要素の可視性を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。