Bagaimana untuk Membuat Div Kanak-kanak Terapung Berkembang ke Ketinggian Induknya?

Meluaskan Ketinggian Div Kanak-Kanak kepada Ketinggian Ibu Bapa

Dalam susun atur web di mana elemen ibu bapa dan anak diletakkan sebelah menyebelah, ia selalunya diperlukan untuk memastikan ketinggian mereka sama. Ini adalah untuk mengelakkan elemen induk daripada kelihatan renggang atau dimampatkan disebabkan kandungan dalam elemen anak.

Masalah:

Anda mempunyai div induk dengan dua div anak terapung (anak-kiri dan anak-kanan). Apabila kandungan kiri anak meningkat, ketinggian div ibu bapa melaraskan dengan sewajarnya. Walau bagaimanapun, ketinggian kanak-kanak kanan kekal tidak berubah.

Penyelesaian:

Untuk menjadikan ketinggian kanak-kanak sama dengan induknya, gunakan CSS berikut gaya:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-left {
    float: left;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• .ibu bapa:

  • limpahan: tersembunyi: Menghalang kandungan div induk daripada melimpah melebihi hadnya.
  • kedudukan: relatif: Tetapkan div induk sebagai konteks kedudukan relatif untuk anaknya divs.

• .kanak-kanak-kiri:

  • apung: kiri: Kedudukan anak-kiri ke kiri dalam ibu bapa.

• .anak-kanan:

  • latar belakang: hijau: Warna pilihan untuk tujuan demonstrasi.
  • ketinggian: 100%: Menetapkan ketinggian kanak-kanak kanan agar sepadan dengan ketinggian ibu bapa.
  • lebar: 50%: Menentukan lebar hak kanak-kanak sebagai 50% daripada ibu bapa.
  • kedudukan: mutlak: Meletakkan hak kanak-kanak secara mutlak dalam ibu bapa.
  • kanan: 0: Menjajarkan anak-kanan ke kanan ibu bapa.
  • atas: 0: Jajarkan anak-kanan ke bahagian atas ibu bapa.

Dengan menggabungkan gaya ini, anda boleh mencapai pengembangan ketinggian yang diingini anak-hak untuk dipadankan dengan ibu bapanya, tanpa mengira kanak-kanak -kandungan kiri.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Kanak-kanak Terapung Berkembang ke Ketinggian Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!