Bagaimana untuk Menjajarkan Elemen Secara Menegak daripada Ibu Bapa Berbeza dalam CSS tanpa JavaScript?

CSS - Cara Menjajarkan Kanak-kanak dalam Ibu Bapa Berbeza Secara Menegak

Untuk menjajarkan kanak-kanak dalam ibu bapa yang berbeza secara menegak tanpa menggunakan JavaScript, jadikan mereka adik-beradik dan gunakan flexbox untuk mengawal susunan dan asas flex mereka. Begini cara untuk mencapainya:

Kod Kemas Kini:

<code class="css">@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

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

  .content h2 {
    order: 0;
  }
  .content p {
    order: 1;
  }
  .content p + p {
    order: 2;
    flex-basis: calc(100% - 30px);
  }
  .content ul {
    order: 3;
  }
}</code>

Kod HTML:

<code class="html"><div class="content">
  <h2>Lorem ipsum Lorem ipsum</h2>
  <p>...</p>
  <p>...</p>
  <ul class="check">...</ul>
  <h2>Lorem ipsum</h2>
  <p>...</p>
  <ul class="check">...</ul>
</div></code>

Penjelasan:

• Pada skrin yang lebih lebar daripada 768px, kandungan dipaparkan sebagai item fleksibel, dengan susunannya ditentukan oleh sifat pesanan.
• flex-basis menetapkan lebar setiap item, tetapi lebar 100% ditetapkan untuk elemen p kosong bagi memastikan ia memenuhi ruang yang tersedia.
• Dengan menjadikan elemen adik-beradik dalam div kandungan, mereka dapat menjajarkan secara menegak.
• Sesuaikan titik putus dalam pertanyaan media agar sepadan dengan Bootstrap jika perlu.
• Anda juga boleh menambah sempadan pada elemen menggunakan sifat sempadan, melaraskannya dengan pertanyaan media untuk menyokong penjajaran menegak dan mendatar.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen Secara Menegak daripada Ibu Bapa Berbeza dalam CSS tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!