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

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>

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!