masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

HTML+CSS Mudah untuk Bermula dengan Float (float)

Apakah terapung?

Float sering digunakan untuk imej, tetapi ia juga sangat berguna dalam reka letak

Bagaimana elemen terapung

Unsur terapung secara mendatar, yang bermaksud elemen itu hanya boleh bergerak ke kiri dan kanan tetapi tidak ke atas dan ke bawah. Elemen terapung akan bergerak sejauh kiri atau kanan yang mungkin sehingga tepi luarnya menyentuh sempadan kotak yang mengandungi atau kotak terapung lain.

Elemen selepas elemen terapung akan mengelilinginya.

Elemen sebelum elemen terapung tidak akan terjejas.

Jika imej diapungkan ke kanan, aliran teks di bawah akan dibalut di sebelah kirinya

div{

float:right;

}


Di bawah kita akan buat contoh: sebagai contoh, terdapat 2 div dengan latar belakang yang berbeza 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style type="text/css">
		/*在这里会用到id选择器*/
		div{
			width:600px;
			height:600px;
			border:1px solid black;
		}

		#dv1{
			width:100px;
			height:100px;
			background-color:green;
			float:left;
		}

		#dv2{
			width:100px;
			height:100px;
			background-color:red;
			float:left;
		}

	</style>
</head>
<body>
	<div>
		<div id='dv1'></div>

		<div id='dv2'></div>
	</div>
</body>
</html>

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> /*在这里会用到id选择器*/ div{ width:600px; height:600px; border:1px solid black; } #dv1{ width:100px; height:100px; background-color:green; float:left; } #dv2{ width:100px; height:100px; background-color:red; float:left; } </style> </head> <body> <div> <div id='dv1'></div> <div id='dv2'></div> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492316 permainan