Rumah > Artikel > hujung hadapan web > Bagaimanakah kita boleh meletakkan tiga bahagian bersebelahan dalam HTML?
Bagaimanakah kita boleh meletakkan tiga bahagian bersebelahan dalam HTML?
- WBOYke hadapan
- 2023-09-04 23:21:051006semak imbas
Teg mentakrifkan pembahagian dokumen HTML. Teg ini digunakan terutamanya untuk mengumpulkan kandungan yang serupa untuk penggayaan yang mudah, dan juga berfungsi sebagai bekas untuk elemen HTML.
Kami meletakkan tiga bahagian sebelah menyebelah dalam HTML menggunakan ciri CSS tag. Apungan sifat CSS digunakan untuk tujuan ini.
Tatabahasa
Berikut ialah sintaks teg Berikut ialah contoh meletakkan tiga kelas partition bersebelahan dalam HTML menggunakan sifat CSS. Berikut ialah output program contoh di atas. Kami menukar gaya dengan menggunakan sifat CSS, kami juga boleh mengatasi sifat gaya. Satu lagi contoh tiga tag yang diletakkan bersebelahan pada halaman HTML adalah seperti berikut - Berikut ialah contoh meletakkan tiga kelas partition bersebelahan dalam HTML menggunakan sifat CSS. Berikut ialah output program contoh di atas. <div class='division'>Content…</div>
Terjemahan bahasa Cina bagi Contoh 1
ialah: Contoh 1
<!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 class='division'>div tag 3</div>
</div>
</body>
</html>
Contoh 2
ialah: Contoh 2
<!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>
<div style="width: 100px; float:left; height:100px; background:red; margin:10px">
Third DIV
</div>
</body>
</html>
Contoh 3 - Dengan mencipta skrin berpecah
<!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: 50%;
background-color: yellowgreen;
}
.middle{
background-color: blueviolet
}
.right {
right: 25%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split middle"></div>
<div class="split right">
</div>
</body>
</html>
Atas ialah kandungan terperinci Bagaimanakah kita boleh meletakkan tiga bahagian bersebelahan dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!