Bagaimana untuk Menjadikan Semua Elemen Lebar yang Sama dengan Terluas dalam CSS Tanpa JavaScript?

Cara Membuat Setiap Elemen Sama Lebar dengan Elemen Terluas Menggunakan CSS

Dalam senario tertentu, adalah perlu untuk memastikan semua elemen dalam susun atur mempunyai lebar yang sama dengan elemen terluas. Ini boleh dicapai dalam CSS tanpa menggunakan JavaScript, tidak seperti contoh popular yang menggunakan JavaScript untuk mencapai kesan ini.

Intipati pendekatan ini terletak pada memahami cara flexbox berfungsi. Dengan melaksanakan peraturan CSS berikut, kami boleh mencipta gelagat yang diingini:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

Dengan menggunakan peraturan CSS ini, kami boleh mencapai hasil berikut:

1. Bekas Flexbox (.list-container): Bekas induk menggunakan inline-flex untuk menjajarkan elemen anak (.list) secara mendatar pada yang sama baris.
2. Senarai bekas (.senarai): Bekas ini menggunakan flex-direction: lajur untuk menjajarkan item senarai (.list-item) secara menegak dalam lajur.
3. Item senarai (.list-item): Elemen ini mempunyai beberapa sifat penggayaan, termasuk lebar tetap yang membolehkan semua item kelihatan sama dalam saiz. Selain itu, flex-wrap: wrap memastikan bahawa item mengalir ke berbilang baris jika perlu, meniru gelagat contoh berasaskan JavaScript.

Berikut ialah contoh struktur HTML yang menunjukkan penggunaan kaedah ini :

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

Kesimpulannya, adalah mungkin untuk meniru kefungsian contoh berasaskan JavaScript hanya menggunakan CSS. Dengan menggunakan prinsip flexbox, kami boleh memastikan bahawa semua elemen dalam reka letak tertentu mempunyai lebar yang sama dengan elemen terluas, mewujudkan penampilan visual yang konsisten dan teratur.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Semua Elemen Lebar yang Sama dengan Terluas dalam CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!