Rumah >hujung hadapan web >tutorial css >Bagaimana Menjajarkan Elemen Terapung Ketinggian Tidak Diketahui secara menegak?

Bagaimana Menjajarkan Elemen Terapung Ketinggian Tidak Diketahui secara menegak?

Susan Sarandon
Susan Sarandonasal
2024-11-03 08:44:03556semak imbas

How to Vertically Align Floating Elements of Unknown Heights?

Jajarkan Menegak Elemen Terapung Ketinggian Tidak Diketahui

Apabila cuba menjajarkan secara menegak unsur terapung yang tidak diketahui ketinggiannya dalam bahagian luar berpusat, seseorang mungkin akan menghadapi kesukaran kerana penjajaran atas apungan semulajadi. Walau bagaimanapun, terdapat pendekatan alternatif untuk mencapai penjajaran menegak menggunakan elemen peringkat sebaris dan sifat penjajaran menegak.

Kaedah Penjajaran Menegak:

Untuk menjajarkan elemen terapung secara menegak dalam bahagian luar, ikut langkah berikut:

  1. Buat Pembalut Aras Sebaris: Balut setiap apungan dalam elemen aras sebaris yang berasingan, seperti satu dengan paparan: sebaris- harta blok. Ini mewujudkan konteks pemformatan blok (BFC) baharu untuk setiap apungan.
  2. Pembungkus Kedudukan Sebaris: Pembungkus peringkat sebaris akan diletakkan sebaris di sebelah satu sama lain disebabkan sifat sebarisnya .
  3. Jajarkan Pembalut Secara Menegak: Gunakan sifat jajar menegak pada pembalut peringkat sebaris untuk menjajarkannya secara menegak dalam bahagian luar.

Isu Berpotensi:

Perhatikan bahawa mungkin terdapat sedikit ruang sisa antara pembalut peringkat sebaris. Untuk menangani perkara ini, rujuk sumber tambahan untuk mengalih keluar ruang antara elemen blok sebaris, seperti yang dinyatakan dalam jawapan yang disediakan.

Kesimpulan:

Dengan memanfaatkan paparan: sifat blok sebaris dan sifat jajar menegak, seseorang boleh menjajarkan unsur terapung yang tidak diketahui ketinggian secara menegak secara berkesan dalam bahagian luar.

Atas ialah kandungan terperinci Bagaimana Menjajarkan Elemen Terapung Ketinggian Tidak Diketahui secara menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn