Bagaimana untuk Mengekalkan Ketinggian Bekas dengan `display: inline-block` dan `position: absolute` dalam CSS?

CSS: display:inline-block and positioning:absolute

Soalan ini meneroka gelagat elemen CSS apabila menggunakan kedua-dua paparan:inline- blok dan kedudukan: mutlak. Kod HTML berikut disediakan:

<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>

Dengan CSS berikut:

<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>

Isu yang dibangkitkan ialah elemen dengan kedudukan mutlak menjadikan kotak yang mengandunginya kehilangan ketinggiannya. Soalan mencari penyelesaian kepada masalah ini sambil mengekalkan kedudukan mutlak dalam kotak .bahagian.

Memahami Isu

Apabila menggunakan position:absolute;, kedudukan elemen dialih keluar daripada aliran halaman biasa . Oleh itu, ia tidak lagi menjejaskan reka letak elemen yang mengandunginya, termasuk ketinggiannya. Oleh itu, elemen bekas, dalam kes ini, kotak .section, kehilangan jejak ketinggiannya dan mengambil ketinggian sifar melainkan dinyatakan sebaliknya.

Selain itu, paparan:sebaris-blok; tidak boleh digunakan pada elemen yang diletakkan secara mutlak kerana kedudukan mutlak mengatasi mod paparan ini, dengan berkesan menetapkannya kepada display:block.

Menyelesaikan Isu Ketinggian

Untuk menyelesaikan masalah ketinggian, seseorang mesti menetapkan secara eksplisit ketinggian kotak .seksyen. Walau bagaimanapun, mengambil kira reka letak yang diingini, menggunakan kedudukan mutlak mungkin bukan pendekatan yang paling sesuai.

Penyelesaian Alternatif

Susun atur yang diingini, dengan lajur kedua dijajarkan dengan kedudukan tetap dalam setiap blok, boleh dicapai tanpa menggunakan kedudukan mutlak. Berikut ialah penyelesaian alternatif:

<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>

Dengan menambahkan penanda tambahan untuk mewakili tahap lekukan dan menggunakan teknik kedudukan relatif dengan pelapik, kami boleh mencapai reka letak yang diingini dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Ketinggian Bekas dengan `display: inline-block` dan `position: absolute` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!