Bagaimanakah Saya Boleh Menyusun Elemen Bersebelahan dalam HTML dan CSS?

Bagaimana saya boleh menyelaraskan

elemen sebelah menyebelah?

Menjajarkan elemen sebelah menyebelah ialah tugas biasa dalam pembangunan web. Terdapat beberapa cara untuk mencapai ini, masing-masing mempunyai kelebihan dan kekurangannya sendiri. Di bawah, kami akan meneroka beberapa kaedah yang paling popular:

Elemen Terapung

elemen boleh diapungkan ke kiri atau kanan, membolehkan mereka menjajarkan di sebelah satu sama lain. Kaedah ini mudah dan berfungsi dengan baik dalam kebanyakan kes. Walau bagaimanapun, ia boleh menyebabkan akibat yang tidak diingini pada reka letak elemen lain pada halaman, jadi adalah penting untuk menggunakan kaedah ini dengan berhati-hati.

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.child-left {
  float: left;
}

.child-right {
  float: right;
}

Paparan Blok Sebaris

Cara lain untuk menyelaraskan elemen bersebelahan ialah menetapkan sifat paparannya kepada sekatan sebaris. Ini akan membolehkan mereka mengalir bersama antara satu sama lain, sama seperti elemen sebaris (cth., teks atau imej).

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.child-left {
  display: inline-block;
}

.child-right {
  display: inline-block;
}

Flexbox

Flexbox ialah sistem susun atur berkuasa yang menyediakan cara yang fleksibel dan serba boleh untuk menyelaraskan elemen. Dengan Flexbox, anda boleh menentukan cara elemen dibentangkan di sepanjang paksi utama (cth., mendatar atau menegak) dan paksi silang (cth., kiri-ke-kanan atau kanan-ke-kiri).

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: row;
}

.child-left {
  flex-basis: auto;
}

.child-right {
  flex-basis: auto;
}

Grid

Grid CSS ialah satu lagi sistem susun atur yang boleh digunakan untuk menjajarkan elemen sebelah menyebelah. Grid menyediakan sistem susun atur dua dimensi, membolehkan anda meletakkan elemen secara mendatar dan menegak.

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.parent {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.child-left {
  grid-column: 1 / 2;
}

.child-right {
  grid-column: 2 / 3;

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Elemen Bersebelahan dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!