「display: inline-block」と「position: ABSOLUTE」を使用するときに折りたたまれたコンテナを処理するにはどうすればよいですか?

表示と配置が混在した要素の配置

CSS での display:inline-block と Position:absolute の組み合わせは、予期しない動作を引き起こす可能性があります。要素が絶対配置されると、その要素は通常のコンテンツ フローから削除されたかのように動作し、その要素を含む要素はその高さを認識しません。

インライン配置と絶対配置

display:inline-block は要素が他の要素と並んで水平方向に流れることを許可しますが、position:absolute はフローから要素を削除し、top、bottom、left、right プロパティに従って要素を配置します。

絶対位置決めに関する問題

提供されたコードでは、position:absolute 要素 (.element-right-b) によってフローから削除され、全体の高さの計算で考慮されなくなります。 .section コンテナ。その結果、コンテナには固有の高さがなくなり、ゼロに折りたたまれます。

解決策

1. コンテナの高さを設定: 位置の場合:absolute は必須です。折りたたまれないように .section コンテナの高さを手動で設定します。
2. 代替位置オプション: 絶対的な位置指定が厳密に必要でない場合は、代わりに float または Sticky を使用することを検討してください。 。どちらも、レイアウトに影響を与えることなく、要素が他の要素に対して相対的に配置できるようにします。
3. Inline-Block with Padding: 位置が固定された複数のネストされた列の場合、すべてのネストされた要素の表示を表示するように設定します。 :inline-block を実行し、後続の列に左パディングを適用して、目的のインデント効果を作成します。

ネストされた列の具体的な例

固定でネストされた列を実現するには位置を変更するには、CSS を次のように変更します:

<code class="css">.section span {
  display: inline-block;
}
.element-left {
  width: 200px;
}
.element-right {
  width: 100px;
}
.indent-1 {
  padding-left: 10px;
}
.indent-2 {
  padding-left: 20px;
}</code>

以上が「display: inline-block」と「position: ABSOLUTE」を使用するときに折りたたまれたコンテナを処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。