Bagaimanakah Saya Boleh Menjajarkan Dua Div Secara Mendatar Tanpa Menukar HTML?

Menjajarkan Elemen Secara Mendatar tanpa Mengubah Penanda

Andaikan anda mempunyai dua div, #element1 dan #elemen2, diletakkan secara mendatar menggunakan CSS. Walau bagaimanapun, disebabkan variasi kandungan dalam #elemen2, ia tidak sejajar dengan sempurna bersama #elemen1. Anda memerlukan cara untuk menyelaraskannya tanpa mengira kandungan atau perbezaan penyemak imbas tanpa mengubah suai struktur HTML.

Penyelesaian: Menggunakan Paparan Sebaris-blok

Untuk mencapai penjajaran ini, anda boleh menggunakan paparan: sifat blok sebaris untuk kedua-dua elemen:

#element1 {
  display: inline-block;
  margin-right: 10px; /* Set padding between the elements */
}

#element2 {
  display: inline-block;
}

Dengan menetapkan paparan: blok sebaris, elemen akan berkelakuan serupa dengan elemen sebaris tetapi mengekalkan sifat peringkat bloknya. Ini membolehkan anda meletakkannya secara mendatar sambil mengekalkan lebar dan ketinggian asalnya. Sifat jidar kanan pada #element1 memperkenalkan jarak yang diingini antara elemen.

Contoh

Berikut ialah contoh yang menunjukkan penjajaran:

<style type="text/css">
  #element1 {
    display: inline-block;
    margin-right: 10px;
  }

  #element2 {
    display: inline-block;
  }
</style>
<div>

Penyelesaian ini menjajarkan #elemen2 dengan berkesan di sebelah #elemen1, mengekalkan padding yang konsisten tanpa mengira lebar pembolehubah #elemen2.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Dua Div Secara Mendatar Tanpa Menukar HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!