Cara Memaparkan Kotak Bersebelahan dalam HTML

Pada masa lalu, banyak laman web menggunakan jadual HTML untuk menyusun halaman kerana kaedah ini menghasilkan hasil yang dapat dipercayai secara konsisten pada penyemak imbas Web yang lebih lama. Ini bukan penyelesaian yang ideal, kerana jadual benar-benar dimaksudkan untuk memaparkan data tabel dan bukannya meletakkan halaman. Menggunakan jadual juga bermaksud bahawa susun aturnya dikodekan dengan keras ke dalam halaman, menjadikan tugas mengemas kini laman web lebih memakan waktu. Cascading Style Sheets memperkenalkan sifat "float", yang membolehkan pereka mengapungkan elemen ke kiri atau kanan. Ini membolehkan lebih banyak kawalan ke atas halaman dan mempunyai kelebihan tambahan untuk menjaga susun atur laman web daripada kandungan.

1

Buka editor teks atau editor HTML dan buat dokumen HTML baru.

2

Tambahkan kod berikut ke isi halaman:

Ini adalah teks di div pertama Ini adalah teks di div kedua

Simpan halaman dan buka di penyemak imbas Web anda. Anda akan melihat bahawa kandungan di div kedua dipaparkan di bawah kandungan di div pertama.

3

Masukkan kod CSS berikut ke bahagian dokumen HTML anda:

Simpan halaman dan muat semula di penyemak imbas anda untuk memaparkan perubahannya. Peraturan CSS mensasarkan kedua div yang bersarang dalam div "myContainer". Properti "float" memberitahu penyemak imbas mengapung div ke kiri - anda boleh menukar nilai float menjadi "kanan" untuk mengapung div ke tepi kanan div yang berisi. Div diatur ke lebar tetap 300 piksel dan mempunyai batas hitam 1-piksel untuk membuat tata letak lebih mudah dilihat. Di penyemak imbas anda, anda akan melihat bahawa kotak-kotak itu kini dipaparkan bersebelahan.

4

Tambahkan div ketiga ke isi halaman, di luar div "myContainer" seperti yang ditunjukkan di bawah:

Ini adalah teks di div pertama Ini adalah teks di div kedua Ini adalah teks di div ketiga

Simpan halaman dan muatkan semula di penyemak imbas anda. Anda akan melihat bahawa div ketiga dipaparkan di sebelah div pertama dan kedua, walaupun belum diapungkan. Ini berlaku kerana elemen HTML yang tersisa mengalir di sekitar elemen terapung. Ini boleh menjadi tingkah laku yang diinginkan dalam beberapa kes, tetapi dalam contoh ini, kita mahu div ketiga dipaparkan di bawah div terapung untuk membuat footer.

5

Masukkan peraturan berikut ke bahagian gaya di bahagian atas halaman:

clear: both; 

}

Ini mensasarkan div "myFooter" ketiga dan memberitahu penyemak imbas untuk menghentikan pengapungan dan memaparkan elemen HTML berikutnya di bawah div "myContainer". Simpan dan muat semula halaman. Anda akan melihat bahawa footer yang dibentuk oleh div ketiga kini dipaparkan di bawah div terapung.