Bagaimana Saya Boleh Menetapkan Ketinggian Kontena Ibu Bapa dengan Kanak-Kanak yang Berkedudukan Benar?

Ketinggian Ibu Bapa dan Kedudukan Mutlak

Semasa kami bekerja dengan bekas dan anak-anaknya yang berada pada kedudukan mutlak atau agak berkedudukan, kami mungkin menghadapi cabaran dalam menentukan ketinggian bekas sambil memastikan bahawa kanak-kanak kekal di dalamnya.

Masalah

Pertimbangkan mengikuti kod HTML dan CSS:

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

Objektifnya adalah untuk memastikan bahawa teks "bar" muncul di antara empat petak, bukan di belakangnya. Walau bagaimanapun, disebabkan kedudukan mutlak segi empat sama, ketinggian bekas tidak boleh ditetapkan berdasarkan dimensi anak-anaknya.

Penyelesaian

Kemas Kini 2022:

Teknologi reka letak CSS moden seperti Flex atau Grid menyediakan penyelesaian yang lebih elegan. Adalah disyorkan untuk meneroka pilihan ini untuk sokongan dan fleksibiliti yang lebih baik.

Jawapan Asal:

Dengan CSS tulen, tidak mungkin untuk menetapkan ketinggian ibu bapa sambil mengekalkan nilai mutlak kedudukan untuk anak-anaknya.

Alternatif Pendekatan:

• JavaScript: Kira ketinggian kanak-kanak yang diposisikan secara mutlak selepas membuat dan gunakannya untuk menetapkan ketinggian ibu bapa.
• Terapung dan Jidar: Letakkan kanak-kanak menggunakan apungan dan jidar sambil mengekalkan mereka dalam aliran dokumen. Gunakan limpahan: tersembunyi (atau teknik pembetulan jelas) pada ibu bapa untuk mengembangkan ketinggiannya berdasarkan dimensi anak-anaknya.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menetapkan Ketinggian Kontena Ibu Bapa dengan Kanak-Kanak yang Berkedudukan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!