Bagaimanakah Saya Boleh Menetapkan Ketinggian Bekas Induk dengan Betul dengan Kanak-Kanak yang Berkedudukan Benar?

Kedudukan Mutlak dan Ketinggian Induk

Apabila bekerja dengan elemen kedudukan mutlak, ia menjadi mencabar untuk menentukan ketinggian bekas induknya. Isu ini timbul apabila elemen kanak-kanak diletakkan secara mutlak atau relatif dalam bekas induk dan anda ingin menetapkan ketinggian yang sesuai untuk elemen induk bagi memastikan anak-anaknya kekal dalam sempadannya.

Untuk menangani isu ini, perkara ini penting. untuk menyedari bahawa elemen yang diletakkan secara mutlak dialih keluar daripada aliran dokumen, menyebabkan mereka tidak dapat mempengaruhi dimensi bekas induknya. Jika tetapan "kedudukan: mutlak" untuk elemen kanak-kanak adalah keperluan, pertimbangkan untuk menggunakan JavaScript untuk melaraskan ketinggian bekas induk secara dinamik selepas elemen anak telah dipaparkan. Ini melibatkan penggunaan JavaScript untuk mengira ketinggian elemen anak yang diposisikan secara mutlak dan kemudian menggunakan nilai tersebut pada ketinggian bekas induk.

Walau bagaimanapun, penyelesaian yang lebih mudah wujud dengan menggunakan sifat apungan dan margin untuk meniru kedudukan mutlak semasa mengekalkan elemen kanak-kanak dalam aliran dokumen. Dengan menetapkan nilai apungan untuk elemen anak (cth., apungan: kiri) dan menggabungkan margin, anda boleh mencapai kedudukan yang diingini. Selain itu, menetapkan limpahan: disembunyikan pada bekas induk atau melaksanakan mana-mana teknik clearfix lain memaksa ketinggiannya untuk mengembang agar sepadan dengan saiz elemen anaknya.

Berikut ialah contoh cara untuk mencapai kedudukan ini menggunakan CSS:

article {
  position: relative;
  overflow: hidden;
}

.one {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: relative;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

Dengan menggunakan teknik ini, anda boleh mengawal kedudukan elemen kanak-kanak dengan berkesan dan mengekalkan ketinggian yang sesuai untuk ibu bapa mereka bekas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Ketinggian Bekas Induk dengan Betul dengan Kanak-Kanak yang Berkedudukan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!