Bagaimana untuk Meletakkan Dua Div Bersebelahan Menggunakan CSS Flots?

Cara Meletakkan Dua Div Bersebelahan Menggunakan CSS

Dalam CSS, mencapai penjajaran menegak yang diingini dan kedekatan elemen div boleh dicapai melalui pelbagai teknik. Satu pendekatan yang berkesan ialah menggunakan terapung.

Menggunakan Float

Mengapungkan satu atau kedua-dua div dalam bersebelahan akan membolehkan mereka menjajarkan secara mendatar tanpa menjejaskan reka letak bersebelahan kandungan.

Satu Terapung Div

Menambah apungan: kiri; property to #first dalam CSS di bawah akan mengapungkannya ke kiri, menyebabkan ia menduduki bahagian kiri div #wrapper manakala div #second kekal di sebelah kanan.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  overflow: hidden;
}

Terapung Kedua-dua Div

Terapung kedua-dua #pertama dan #kedua juga akan menghasilkan susunan sebelah menyebelah. Walau bagaimanapun, adalah penting untuk mengelakkan div #wrapper daripada mengecut di sekeliling anak terapungnya. Untuk mencapai ini, tambah limpahan: tersembunyi; kepada #wrapper, memastikan ia mengandungi kedua-dua elemen terapung.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  float: left;
}

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Dua Div Bersebelahan Menggunakan CSS Flots?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!