Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengekalkan Ketinggian Sama untuk Lajur dengan Panjang Kandungan Berbeza dalam CSS?

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

Barbara Streisand
Lepaskan: 2024-10-23 21:13:30
asal
1070 orang telah melayarinya

How to Maintain Equal Height for Columns with Different Content Lengths in 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;
  }
}
Salin selepas log masuk

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!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan