CSS에서 `display: inline-block` 및 `position:absolute`를 사용하여 컨테이너 높이를 유지하는 방법은 무엇입니까?

CSS: display:inline-block 및 positioning:absolute

이 질문은 display:inline-을 모두 사용할 때 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 상자)는 별도로 지정하지 않는 한 높이를 추적하지 못하고 높이가 0이 됩니다.

추가로, display:inline-block; 절대 위치 지정이 이 표시 모드를 재정의하여 효과적으로 표시:블록으로 설정하기 때문에 절대 위치 지정 요소에는 적용할 수 없습니다.

높이 문제 해결

높이 문제를 해결하려면 명시적으로 설정해야 합니다. .section 상자의 높이. 그러나 원하는 레이아웃을 고려할 때 절대 위치 지정을 사용하는 것은 가장 적합한 접근 방식이 아닐 수 있습니다.

대체 솔루션

두 번째 열이 각 블록 내의 고정 위치에 정렬되는 원하는 레이아웃은 다음과 같습니다. 절대 위치 지정을 사용하지 않고 달성됩니다. 대체 솔루션은 다음과 같습니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!