CSS で `display: inline-block` と `position:Absolute` を使用してコンテナの高さを維持するにはどうすればよいですか?

CSS: display:inline-block とpositioning:absolute

この質問では、display:inline-block の両方を使用した場合の CSS 要素の動作について調べます。ブロックと位置:絶対。次の HTML コードが提供されています。

<code class="html"><div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div></code>

次の CSS を使用します。

<code class="css">.section {
  display: block;
  width: 200px;
  border: 1px dashed blue;
  margin-bottom: 10px;
}
.element-left,
.element-right-a,
.element-right-b {
  display: inline-block;
  background-color: #ccc;
  vertical-align: top;
}
.element-right-a,
.element-right-b {
  max-width: 100px;
}
.element-right-b {
  position: absolute;
  left: 100px;
}</code>

問題は、 が絶対配置の要素では、その要素を含むボックスの高さが失われます。この質問では、.section ボックス内の絶対位置を維持しながら、この問題の解決策を模索しています。

問題を理解する

position:absolute; を使用すると、要素の位置が通常のページ フローから削除されます。 。そのため、高さを含む、その要素を含む要素のレイアウトには影響しなくなりました。したがって、コンテナ要素 (この場合は .section ボックス) は高さを失い、特に指定しない限り、高さはゼロになります。

さらに、display:inline-block;は、絶対配置の要素には適用できません。これは、絶対配置がこの表示モードをオーバーライドし、表示モードを事実上、display:block に設定するためです。

高さの問題の解決

高さの問題を解決するには、明示的に設定する必要があります。 .section ボックスの高さ。ただし、目的のレイアウトを考慮すると、絶対配置の使用は最適なアプローチではない可能性があります。

代替解決策

目的のレイアウトでは、2 番目の列が各ブロック内の固定位置に揃えられており、次のことが可能です。絶対位置決めを使用せずに実現できます。別の解決策は次のとおりです。

<code class="html"><div class="section">
  <span class="element-left"><span class="indent-0">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-1">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-2">some text</span></span>
  <span class="element-right">some text</span>
</div></code>

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

インデント レベルを表す追加のマークアップを追加し、パディングを使用した相対位置決め手法を使用することで、目的のレイアウトを簡単に実現できます。

以上がCSS で `display: inline-block` と `position:Absolute` を使用してコンテナの高さを維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。