絶対に配置された子で親コンテナの高さを設定するにはどうすればよいですか?

親の高さと絶対位置

コンテナとその絶対配置または相対配置の子を扱うとき、コンテナの高さを決定しながら、

問題

次の HTML と CSS を考えてください。 code:

<section>

article {
  position: relative;
}

.one {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: absolute;
  top: 10px;
  right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

目的は、「バー」テキストが 4 つの四角形の後ろではなく、間に表示されるようにすることです。ただし、正方形の絶対位置により、コンテナの高さをその子の寸法に基づいて設定することはできません。

ソリューション

2022 更新:

Flex や Grid などの最新の CSS レイアウト テクノロジは、よりエレガントなソリューションを提供します。サポートと柔軟性を向上させるために、これらのオプションを検討することをお勧めします。

元の回答:

純粋な CSS では、絶対値を維持しながら親の高さを設定することはできません。子の配置。

代替アプローチ:

• JavaScript: レンダリング後に絶対に配置された子の高さを計算し、それを使用して親の高さを設定します。
• フロートとマージン: ドキュメント フロー内に保持しながら、フロートとマージンを使用して子を配置します。親の overflow: hidden (または Clearfix テクニック) を利用して、子の寸法に基づいて高さを拡張します。

以上が絶対に配置された子で親コンテナの高さを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。