Bagaimanakah kita boleh meletakkan dua bahagian bersebelahan dalam HTML?-html tutorial-php.cn

Bagaimanakah kita boleh meletakkan dua bahagian bersebelahan dalam HTML?

王林

Lepaskan： 2023-08-31 16:25:01

ke hadapan

1255 orang telah melayarinya

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.

Bagaimanakah kita boleh meletakkan dua bahagian bersebelahan dalam HTML?

Tatabahasa

Berikut ialah sintaks tag .

<div class='division'>Content…</div>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!