Bagaimana untuk menyelaraskan tiga div (kiri/tengah/kanan) dalam satu div?

Question

Saya mahu menjajarkan 3 div di dalam div bekas, seperti ini:

[[KIRI] [PUSAT] [KANAN]]

Lebar div bekas ialah 100% (tiada lebar ditetapkan), dan div tengah harus kekal di tengah selepas mengubah saiz bekas.

Jadi saya tetapkan:

<kod>#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
</code>

Tetapi hasilnya menjadi:

[[KIRI] [PUSAT] ]
                              [KANAN]

Sebarang cadangan?

Answer 1

Jajarkan tiga div secara mendatar menggunakan Flexbox

Ini ialah cara CSS3 untuk menjajarkan div secara mendatar dalam div lain.

#container {
  display: flex;                  /* 建立flex容器 */
  flex-direction: row;            /* 默认值；可以省略 */
  flex-wrap: nowrap;              /* 默认值；可以省略 */
  justify-content: space-between; /* 从默认值（flex-start）切换 */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

Atribut

justify-content mempunyai lima nilai:

• flex-start (lalai)
• flex-end
• pusat
• ruang-antara
• ruang-sekitar

Dalam semua kes, tiga div berada pada baris yang sama. Untuk penerangan bagi setiap nilai, lihat: https://stackoverflow.com/a/33856609/3597276

---

Kebaikan flexbox:

1. Jumlah kod yang rendah dan sangat cekap
2. Pemusatan menegak dan mendatar adalah mudah
3. Lajur kontur sangat mudah
4. Pelbagai pilihan untuk menyelaraskan elemen flex
5. Responsif
6. Tidak seperti pelampung dan meja, pelampung dan meja mempunyai keupayaan susun atur yang terhad kerana ia tidak pernah digunakan untuk membina reka letak, Flexbox ialah teknologi moden (CSS3) dengan pelbagai pilihan.

---

Ketahui lebih lanjut tentang flexbox:

• Cara menyelaraskan item Flex
• Menggunakan CSS flexbox ~ MDN
• Panduan Lengkap untuk Flexbox ~ CSS-Tricks
• Apakah itu Flexbox? ! ~ Tutorial video YouTube

---

Sokongan Pelayar: Flexbox disokong oleh semua pelayar utama, kecuali IE < 10. Beberapa versi penyemak imbas terbaharu, seperti Safari 8 dan IE10, memerlukan awalan vendor. Untuk menambah awalan dengan cepat, gunakan Autoprefixer. Lihat jawapan ini untuk butiran lanjut.

Answer 2

Menggunakan CSS ini, letakkan div anda seperti berikut (terapung dahulu):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS: Anda juga boleh terapung kanan dahulu, kemudian kiri, kemudian tengah. Adalah penting bahawa kandungan terapung datang sebelum bahagian tengah "utama".

Nota: Biasanya anda akan mahu meletakkannya pada ketinggian #container中的最后加入这段代码：<div style="clear:both;"></div>，它会使#container的高度垂直延伸，以容纳两侧的浮动内容，而不仅仅是从#center untuk mengelakkan kandungan di kedua-dua belah daripada melimpah ke bahagian bawah.