HTML+CSS Mudah Dimulakan dengan Model Terapung
sangat menonjol sehingga menduduki barisannya sendiri Bagaimana jika kita mahu dua elemen berbentuk blok dipaparkan bersebelahan? Jangan risau, menetapkan elemen terapung boleh mencapai hasrat ini.
Mana-mana elemen tidak boleh terapung secara lalai, tetapi ia boleh ditakrifkan sebagai terapung menggunakan CSS seperti div, p, table, img, dll. boleh ditakrifkan sebagai terapung
Mari kita lakukan. ini Tulis contoh terapung, kodnya adalah seperti berikut
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流動(dòng)模式下的內(nèi)聯(lián)元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
}
#dv2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>Kod di atas ialah elemen blok div menduduki baris eksklusif Sekarang kita perlu meletakkannya pada satu baris untuk dipaparkan, dan kemudian menambah jarak antara kedua-dua div. Sila lihat kod berikut:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流動(dòng)模式下的內(nèi)聯(lián)元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background:red;
float:left;
margin-left:5px; /*調(diào)節(jié)倆個(gè)div之間的距離*/
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>Dengan cara ini, kesan yang kita inginkan selesai Pertama, kita perlu membuat apungan ke kiri untuk div pertama, dan yang sama untuk yang kedua satu. Kemudian kedua-duanya akan dipautkan bersama dan dipaparkan pada baris yang sama
Seterusnya kita membuat sempadan kiri untuk div kedua dan itu sahaja
