Bagaimana untuk Mencapai Lebar Bendalir dan Jarak Sekata untuk Empat DIV dalam Bekas?

Lebar Cecair dengan DIV Jarak Sama

Soalan:

Anda mempunyai bekas lebar cecair DIV dengan empat DIV, setiap satu dengan dimensi tetap. Bagaimanakah anda boleh mengapungkan kotak 1 ke kiri, kotak 4 ke kanan dan ruang kotak 2 dan 3 sama rata di antara mereka, mengekalkan jarak bendalir apabila saiz tetingkap penyemak imbas berubah?

**Jawapan:

Rujuk JSFiddle yang disediakan untuk contoh lengkap: http://jsfiddle.net/thirtydot/EDp8R/

Penjelasan:

Penyelesaian ini menggunakan beberapa teknik untuk mencapai reka letak yang diingini:

• text-align: justify;: Ini menjajarkan DIV secara mendatar, mengagihkan ruang antara mereka.
• .regangan: Span dengan lebar ditetapkan kepada 100%. Ia mengembang untuk mengisi baki lebar bekas.
• paparan:sebaris-blok; *paparan:sebaris; zum:1;: Memastikan gelagat sekatan sebaris untuk IE6/7.
• saiz fon: 0; line-height: 0;: Menghalang ruang menegak yang disebabkan oleh inline-block dalam IE6.

Dengan menggabungkan teknik ini, DIV diposisikan dengan lancar, jarak sekata dan terapung seperti yang dikehendaki, tanpa mengira lebar bekas.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Lebar Bendalir dan Jarak Sekata untuk Empat DIV dalam Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!