Mengapa Lajur Blok Sebaris Lebar 50% Saya Membungkus ke Baris Seterusnya?-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Mengapa Lajur Blok Sebaris Lebar 50% Saya Membungkus ke Baris Seterusnya?

Patricia Arquette

Nov 29, 2024 pm 03:30 PM

Why Do My 50% Width Inline-Block Columns Wrap to the Next Line?

Pembungkusan Elemen Blok Sebaris: Isu Lebar

Dalam mencipta reka letak dua lajur dengan lebar 50% untuk setiap lajur, ramai yang memilih untuk paparan: pendekatan blok sebaris untuk mengelakkan potensi cabaran dengan apungan. Walau bagaimanapun, apabila menggunakan 100% lebar untuk kedua-dua lajur, senario yang membingungkan muncul. Lajur kedua nampaknya pecah ke baris kedua.

Punca Asas

Penyebab di sebalik tingkah laku ini terletak pada pertimbangan HTML terhadap aksara ruang putih mengikut paparan: sebaris -sekat. Apabila aksara ruang memisahkan dua elemen div, penyemak imbas mentafsirkan ruang ini sebagai lebar tambahan, menyebabkan lajur kedua dibalut.

Penyelesaian

Untuk menyelesaikan isu ini , hapuskan aksara ruang putih antara elemen div. Ini memastikan pengiraan lebar gabungannya adalah tepat, tanpa penambahan ruang tambahan. HTML yang dilaraskan akan kelihatan seperti:

<div>

Salin selepas log masuk

Dengan pengubahsuaian mudah ini, kedua-dua lajur kini menduduki 100% lebar, kekal bersebelahan pada baris yang sama.

Atas ialah kandungan terperinci Mengapa Lajur Blok Sebaris Lebar 50% Saya Membungkus ke Baris Seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

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