Bagaimana untuk menjadikan ketinggian lajur bersebelahan dalam UI elemen secara automatik menyesuaikan diri dengan kandungan?

Susun atur UI Unsur: Selesaikan masalah ketinggian lajur yang tidak konsisten pada baris yang sama

Apabila membina halaman menggunakan UI elemen, anda sering menghadapi masalah bahawa ketinggian lajur bersebelahan dalam baris yang sama tidak dapat dipadankan secara automatik kerana perbezaan kandungan. Artikel ini menganalisis masalah ini dan menyediakan penyelesaian yang berkesan.

Penerangan Masalah

Katakan kami menggunakan el-row dan el-col untuk membina susun atur berikut:

<el-row class="row">
  <el-col class="col">
    <span class="label">Parallelism</span>
    <span class="value">Kandungan teks yang lebih panjang ...</span>
  </el-col>
  <el-col class="col">
    <span class="label">Parallelism OK/Ng</span>
    <span class="value">Teks pendek</span>
  </el-col>
</el-row>

Walaupun height: auto; daripada .label dan .value ditetapkan, ketinggian lajur pendek mungkin tidak konsisten dengan lajur panjang kerana el-col atau batasan gaya lain.

Analisis masalah

Sebab akar masalah terletak pada tingkah laku ketinggian lalai el-col dan susun atur unsur-unsur induk. Ketinggian el-col dipengaruhi oleh kandungannya, tetapi jika susun atur elemen induk ( el-row ) mengehadkan pelarasan automatik ketinggian elemen kanak-kanak, ia akan menyebabkan ketidakkonsistenan ketinggian.

Penyelesaian

Agar ketinggian lajur secara automatik menyesuaikan diri dengan kandungan, kita perlu menyesuaikan gaya CSS:

1. Keluarkan had ketinggian untuk el-col : Keluarkan sebarang tetapan ketinggian yang jelas atau tersirat dalam el-col (mis. height: 100%; ). Biarkan ketinggian el-col sepenuhnya menentukan kandungan elemen anaknya.

2. Laraskan susun atur el-row : Pastikan susun atur el-row membolehkan unsur-unsur kanak-kanak berkembang secara automatik. Jika align-items: center; digunakan, keluarkan atau ubahnya align-items: stretch; ( stretch adalah nilai lalai dan boleh ditinggalkan). Ini akan membolehkan ketinggian el-col diselaraskan secara automatik mengikut kandungan.

3. Pilihan: Kandungan Vertikal Berpusat: Jika kandungan perlu berpusat secara menegak, anda boleh memohon display: flex; dan align-items: center; pada .label dan .value .

Contoh CSS yang diubahsuai:

 .row {
  Sempadan-Bottom: Solid .0625Rem #9C9C9C;
  Paparan: Flex;
  /* Align-items: regangan; (nilai lalai, boleh ditinggalkan) */

  .col {
    Paparan: Flex;
    flex-arah: lajur; /* Pastikan label dan nilai diatur secara menegak*/

    Span: tidak (: anak terakhir) {
      Sempadan-kanan: pepejal .0625REM #9C9C9C;
    }
    :: V-Dee Span {
      Flex: 1; /* Benarkan ketinggian span untuk berkembang secara automatik*/
      Word-break: break-all;
      Word-Wrap: Break-word;
      /* ketinggian: 23px; Keluarkan ketinggian tetap*/
      /* Line-Height: 23px; Keluarkan ketinggian garis tetap*/
      Teks-Align: Pusat; /* Pilihan: pusat mendatar*/
    }
    .label {
      latar belakang warna: #e0e0e0;
      Warna: #000000;
      Font-Weight: Bold;
      ketinggian: auto;
      Paparan: Flex;
      Align-item: pusat; /* pusat menegak*/
    }
    .value {
      ketinggian: auto;
      Paparan: Flex;
      Align-item: pusat; /* pusat menegak*/
    }
  }
}

Melalui pelarasan di atas, ketinggian el-col akan diselaraskan secara automatik mengikut kandungannya, dengan itu menyelesaikan masalah ketinggian yang tidak konsisten lajur bersebelahan dalam baris yang sama. Ingatlah untuk menghapuskan gaya yang memaksa ketinggian el-col .

Atas ialah kandungan terperinci Bagaimana untuk menjadikan ketinggian lajur bersebelahan dalam UI elemen secara automatik menyesuaikan diri dengan kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!