Rumah >hujung hadapan web >html tutorial >Bagaimanakah kita boleh meletakkan dua bahagian bersebelahan dalam HTML?
Bagaimanakah kita boleh meletakkan dua bahagian bersebelahan dalam HTML?
- 王林ke hadapan
- 2023-08-31 16:25:011253semak imbas
Teg mentakrifkan pembahagian dokumen HTML. Teg ini digunakan terutamanya untuk mengumpulkan kandungan yang serupa untuk penggayaan yang lebih mudah. Ia juga berfungsi sebagai bekas untuk elemen HTML dan kami boleh menggayakan teg ini dengan mudah menggunakan atribut kelas atau id. Kita boleh meletakkan kandungan di dalam tag .
Menggunakan sifat CSS, kita boleh meletakkan dua tag bersebelahan dalam HTML.
Dengan tetapan penggayaan, kami boleh meletakkan dua kelas bahagian bersebelahan.
Tatabahasa
Berikut ialah sintaks tag .
<div class='division'>Content…</div>
Contoh 1
Berikut ialah contoh menggunakan sifat CSS untuk meletakkan dua kelas bahagian sebelah menyebelah dalam HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.division {
display: inline-block;
border: 1px solid red;
padding: 1rem 1rem;
</style>
</head>
<body>
<!--<div class='parent'>-->
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<!--</div>-->
</body>
</html>
Berikut ialah output program contoh di atas.
Contoh 2
Dalam contoh lain menambahkan dua teg bersebelahan, kami menggunakan sifat CSS untuk menggayakannya dengan menetapkan ketinggian kepada 100px dan menetapkan margin menggunakan set_margin -
<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
First DIV
</div>
<div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
Second DIV
</div>
</body>
</html>
Tambah tag ibu bapa
Kita juga boleh menambah ibu bapa untuk meletakkan dua bahagian. Di sini teg ibu bapa bertindak sebagai bekas untuk kelas kanak-kanak (elemen HTML).
Kami juga boleh menggayakan induk menggunakan sifat CSS.
Tatabahasa
Berikut ialah sintaks untuk teg ibu bapa, yang mengandungi dua tag anak.
<div class='division'>Content…</div> <div class='division'>Content…</div>
Contoh 1
Diberikan di bawah ialah contoh meletakkan dua tag bersebelahan dalam HTML, dalam program ini kami menggunakan kelas induk untuk menambah lebih banyak gaya dalam dokumen HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
</div>
</body>
</html>
Berikut ialah output program contoh di atas.
Contoh - dengan mencipta skrin berpecah
Diberikan di bawah adalah contoh meletakkan dua tag div bersebelahan dengan membelah skrin kepada separuh.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
}
.left {
left: 0;
background-color: yellowgreen;
}
.right {
right: 0;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
Berikut ialah output program contoh di atas.
Atas ialah kandungan terperinci Bagaimanakah kita boleh meletakkan dua bahagian bersebelahan dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!