Tutorial Reka Letak CSS: Cara Terbaik untuk Melaksanakan Reka Letak Lajur Ketinggian Sama

Tutorial Reka Letak CSS: Cara terbaik untuk melaksanakan reka letak lajur ketinggian sama, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu melaksanakan reka letak lajur ketinggian sama. Susun atur lajur sama ketinggian merujuk kepada ketinggian penyesuaian berbilang lajur untuk mengekalkan kesan reka letak ketinggian yang sama. Ini boleh menjadikan halaman kelihatan lebih kemas dan cantik. Artikel ini akan memperkenalkan cara terbaik untuk melaksanakan reka letak lajur ketinggian sama dan menyediakan contoh kod khusus untuk rujukan pembaca.

Kaedah 1: Gunakan paparan: sel jadual

Gunakan atribut paparan: sel jadual untuk mencapai reka letak lajur ketinggian yang sama. Nilai atribut ini digunakan terutamanya pada elemen bukan jadual untuk mencapai kesan ketinggian yang sama dengan mensimulasikan sifat jadual. Kod khusus adalah seperti berikut:

Struktur HTML:

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

Gaya CSS:

.container {
  display: table;
  width: 100%;
}

.column {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ccc;
}

Dalam kod di atas, kami mentakrifkan div bekas yang membungkus semua lajur, dan menetapkan paparan: atribut jadual kepadanya untuk menjadikannya mempunyai sifat sesuatu jadual. Kemudian tetapkan paparan: atribut sel jadual untuk setiap lajur untuk menjadikannya sel jadual. Dengan cara ini, kesan susun atur lajur ketinggian yang sama boleh dicapai.

Kaedah 2: Gunakan susun atur Flexbox

Flexbox ialah kaedah reka letak baharu yang disediakan oleh CSS3, yang boleh melaksanakan susun atur lajur ketinggian yang sama dengan mudah. Kod khusus adalah seperti berikut:

Struktur HTML:

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

Gaya CSS:

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

Dalam kod di atas, kami menetapkan paparan: atribut flex kepada bekas untuk mengubahnya menjadi bekas Flex. Kemudian tetapkan atribut flex: 1 untuk setiap lajur untuk menjadikan lebar setiap lajur adaptif, dengan itu mencapai kesan reka letak lajur sama ketinggian.

Kaedah 3: Gunakan JavaScript

Jika kaedah di atas tidak dapat memenuhi keperluan anda, anda juga boleh menggunakan JavaScript untuk melaksanakan susun atur lajur ketinggian yang sama. Kod khusus adalah seperti berikut:

Struktur HTML:

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

Kod JavaScript:

function resizeColumns() {
  var columns = document.getElementsByClassName('column');
  var maxHeight = 0;
  
  for (var i = 0; i < columns.length; i++) {
    columns[i].style.height = 'auto';
    maxHeight = Math.max(maxHeight, columns[i].offsetHeight);
  }
  
  for (var i = 0; i < columns.length; i++) {
    columns[i].style.height = maxHeight + 'px';
  }
}

window.onload = resizeColumns;
window.onresize = resizeColumns;

Dalam kod di atas, kami mentakrifkan fungsi resizeColumns untuk melaraskan ketinggian setiap lajur secara dinamik menggunakan JavaScript. Mula-mula dapatkan elemen DOM bagi semua lajur, kemudian lintasi untuk mengira ketinggian maksimum, dan kemudian tetapkan ketinggian yang sama untuk setiap lajur. Akhir sekali, fungsi ini dipanggil apabila halaman web dimuatkan dan saiz tetingkap berubah untuk memastikan susun atur sentiasa mempunyai ketinggian yang sama.

Ringkasnya, terdapat tiga cara terbaik untuk melaksanakan reka letak lajur sama ketinggian: menggunakan paparan: sel jadual, menggunakan reka letak Flexbox dan menggunakan JavaScript. Pembaca boleh memilih kaedah yang sesuai berdasarkan keperluan tertentu. Saya harap contoh kod dalam artikel ini dapat membantu pembaca menguasai teknik susun atur lajur sama tinggi dengan lebih baik.

Atas ialah kandungan terperinci Tutorial Reka Letak CSS: Cara Terbaik untuk Melaksanakan Reka Letak Lajur Ketinggian Sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!