Bagaimanakah Saya Boleh Menyusun Semula Div Secara Dinamik Berdasarkan Lebar Skrin Menggunakan CSS?

Menyusun Semula Div Secara Dinamik Berdasarkan Lebar Peranti dengan CSS

Apabila membuat tapak web responsif, mengurus paparan dan susunan elemen menjadi penting. Cabaran biasa timbul apabila div perlu disusun semula berdasarkan lebar skrin. Walaupun tugas ini boleh dicapai dengan mudah dengan lebih sedikit div, ia menjadi lebih kompleks dengan bilangan yang semakin meningkat.

Mencipta Lajur dengan Dua Div

Mari kita mulakan dengan senario mudah dua div sebelah menyebelah. Pada mulanya, kita boleh menggunakan CSS untuk mencipta dua lajur:

.container {
  width: 80%;
  margin: 0 auto;
}

.column-half {
  display: table-cell;
  padding: 25px;
  vertical-align: top;
  width: 40%;
}

.column-half-1 {
  float: left;
}

.column-half-2 {
  float: right;
}

Pendekatan ini meletakkan div sebelah menyebelah dalam skrin yang lebih luas tetapi menyusunnya secara menegak apabila skrin terlalu sempit.

Cabaran dengan Empat Lajur

Melanjutkan pendekatan ini kepada empat lajur menjadi masalah. Dengan menggunakan apungan, kita boleh mencipta empat lajur yang menjajar secara mendatar. Walau bagaimanapun, pesanan ini tidak boleh diubah dengan mudah dalam skrin yang lebih sempit.

Penyelesaian menggunakan Flexbox

Penyelesaian kepada masalah ini terletak pada sifat Flexbox, 'pesanan' dan ' aliran lentur'. Flexbox membolehkan kami mengawal reka letak dan susunan elemen dalam kedua-dua baris dan lajur. Dengan menggunakan sifat ini, kami boleh mentakrifkan susunan div dalam skrin yang lebih sempit tanpa menjejaskan reka letak dalam skrin yang lebih luas:

.container {
  display: flex; /* Switches to a flex layout */
  flex-flow: column; /* Stacks elements vertically in narrower screens */
}

.column-quarter {
  width: 25%; /* Adjust percentage based on the number of columns */
}

.column-quarter-1 {
  order: 3; /* Defines the order in narrower screens */
}

.column-quarter-2 {
  order: 2;
}

.column-quarter-3 {
  order: 1;
}

.column-quarter-4 {
  order: 4;
}

Penyelesaian ini memastikan bahawa div dipaparkan sebagai baris apabila lebar skrin membenarkan dan kemudian menyusun semula sendiri secara automatik ke dalam lajur berdasarkan susunan yang ditentukan apabila skrin mengecil. Kaedah ini berkesan menangani cabaran mengurus susunan div secara dinamik dalam reka letak baris dan lajur.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Div Secara Dinamik Berdasarkan Lebar Skrin Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!