Bagaimana untuk menyelaraskan tiga div (kiri/tengah/kanan) dalam satu div?
P粉092778585
P粉092778585 2023-08-21 15:09:18
0
2
395
<p>Saya mahu menjajarkan 3 div di dalam div bekas, seperti ini: </p> <pre class="brush:php;toolbar:false;">[[KIRI] [PUSAT] [KANAN]]</pre> <p>Lebar div bekas ialah 100% (tiada lebar ditetapkan), dan div tengah harus kekal di tengah selepas mengubah saiz bekas. </p> <p>Jadi saya tetapkan: </p> <pre class="lang-css prettyprint-override"><kod>#container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} </code></pre> <p>Tetapi hasilnya menjadi: </p> <pre class="brush:php;toolbar:false;">[[KIRI] [PUSAT] ] [KANAN]</pre> <p>Sebarang cadangan? </p>
P粉092778585
P粉092778585

membalas semua(2)
P粉291886842

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:


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.

P粉029057928

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!