Bagaimana untuk Menjajarkan Elemen Div Dengan Menjajarkan Kanan Sambil Mengekalkan Div Ketiga Dijajar Kiri?

Menjajarkan Elemen Div Menggunakan Margin dan Terapung

Pernyataan Masalah:

Seorang pengguna bertujuan untuk menyelaraskan dua elemen div (butang dan borang) sambil mengekalkan div ketiga (kanvas) dijajar kiri. Walau bagaimanapun, percubaan untuk menjajarkan dua elemen pertama menyebabkan ia kelihatan bersebelahan dan bukannya satu demi satu.

Penyelesaian menggunakan Jidar dan Terapung:

kod yang disediakan menggunakan terapung untuk menyelaraskan butang dan bentuk. Walaupun terapung boleh berfungsi secara umum, ia diketahui mempunyai masalah dengan IE 6 & 7.

Untuk menyelesaikan masalah ini, pertimbangkan untuk menggunakan jidar dan bukannya terapung untuk div dalam yang mengandungi butang dan borang. Berikut ialah CSS yang disemak:

#addEventForm {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}

Penjelasan:

• margin-kiri: auto: Ini menjajarkan div dalam dengan tepi kanan div yang mengandunginya.
• margin-kanan: 0: Ini memastikan div tidak mempunyai ruang di sebelah kanan, membenarkan butang mengambil ruang yang tinggal.

Penggunaan jidar memberikan gelagat yang lebih konsisten merentas penyemak imbas yang berbeza, termasuk IE, memastikan elemen diselaraskan seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen Div Dengan Menjajarkan Kanan Sambil Mengekalkan Div Ketiga Dijajar Kiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!