Cara Mengekalkan Penjajaran dalam Baris Responsif Tanpa JavaScript

Mengekalkan Ketinggian Adik Beradik dalam Baris Responsif

Apabila berhadapan dengan lajur yang mengandungi panjang kandungan yang berbeza-beza dan keinginan untuk mengekalkan penjajaran di dalamnya, menggunakan JavaScript tidak perlu. Dengan mengubah suai CSS, kami boleh membuat reka letak fleksibel yang memenuhi fungsi yang diingini tanpa melanggar pengoptimuman mudah alih.

Kuncinya adalah untuk menjadikan item dalam setiap lajur bersaudara, supaya mereka boleh "melihat" satu sama lain. Kemudian, kami menggunakan pertanyaan media untuk menyusun semula pesanan mereka berdasarkan lebar skrin. Ini memastikan bahawa pada skrin yang lebih luas, item berada bersebelahan, manakala pada skrin yang lebih sempit, ia disusun secara menegak.

Kod Kemas Kini:

Untuk mencapai matlamat ini, kami memperkenalkan kelas kandungan yang membungkus semua elemen dalam setiap lajur:

<code class="css">.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}</code>

Elemen individu dalam kandungan diberi lebar tersuai:

<code class="css">.content > * {
  flex-basis: calc(50% - 30px);
}</code>

Pertanyaan Media:

Untuk skrin yang lebih luas, kami menggunakan pertanyaan media untuk menyusun semula elemen dan melaraskan lebarnya:

<code class="css">@media (min-width: 768px) {
  .content h2 {
    /*  1st row  */
    order: 0;
  }

  .content p {
    /*  2nd row  */
    order: 1;
  }

  .content p + p {
    /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);
  }

  .content ul {
    /*  4th row  */
    order: 3;
  }
}</code>

Nota Tambahan:

• Anda mungkin perlu melaraskan titik putus pertanyaan media dan nilai asas fleksibel untuk saiz skrin yang berbeza.
• Untuk mengambil kira unsur yang berbeza ketinggian, anda boleh menggunakan sifat sempadan pada elemen individu dengan pertanyaan media tambahan.

Atas ialah kandungan terperinci Cara Mengekalkan Penjajaran dalam Baris Responsif Tanpa JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!