Bagaimana untuk Mengekalkan Ketinggian Sama untuk Lajur dengan Panjang Kandungan Berbeza dalam CSS?

CSS: Mengekalkan Ketinggian Sama untuk Lajur dengan Panjang Kandungan Berbeza

Dalam susun atur dua lajur, adalah wajar untuk menyelaraskan senarai dalam setiap lajur secara mendatar, walaupun panjang kandungan berbeza-beza. Ini menimbulkan cabaran dalam reka bentuk responsif, kerana lajur mungkin pecah pada skrin yang lebih kecil.

Untuk mencapai penjajaran ini tanpa JavaScript, kaedah yang membolehkan item melihat satu sama lain sebagai adik-beradik diperlukan. Untuk saiz skrin yang lebih luas, susunan item mesti disusun semula untuk memastikan susunan yang betul.

Berikut ialah versi terkini kod anda menggunakan CSS dan pertanyaan media:

@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
}

Pertanyaan media ini memperkenalkan reka letak flexbox untuk elemen .content, membenarkan elemen anaknya menjajar dan membalut secara fleksibel. Sifat tertib memastikan item disusun dengan betul apabila lajur pecah pada skrin yang lebih kecil.

Untuk menambah sempadan pada elemen bagi perbezaan visual, anda boleh menggunakan gabungan atas sempadan, kiri sempadan, sempadan kanan , dan bahagian bawah sempadan, dilaraskan dengan pertanyaan media tambahan untuk mengambil kira tindanan mendatar dan menegak.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Ketinggian Sama untuk Lajur dengan Panjang Kandungan Berbeza dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!