Bagaimana untuk Memusatkan Bekas dengan Elemen Kanak-Kanak Jajaran Kiri dan Imej Responsif?

Center Align Container and Left Align Child Elements

Soalan ini bertujuan untuk memaparkan imej dalam bekas yang berpusat pada halaman, dengan imej dikumpulkan bersama dan dipaparkan satu demi satu. Cabarannya terletak pada mengekalkan jarak tetap antara imej sambil menampung pelbagai lebar tetingkap penyemak imbas.

Untuk mencapai reka letak ini menggunakan CSS, pertanyaan media boleh digunakan untuk melaraskan lebar div yang mengandungi imej berdasarkan saiz port pandangan . Kod di bawah menunjukkan pendekatan ini:

body { margin: 10px 0; }
.outer { text-align: center; }
.inner { 
  font-size: 0; /* fix for inline gaps */
  display: inline-block;
  text-align: left;
}
.item {
  font-size: 16px; /* reset font size */
  display: inline-block;
  margin: 5px; /* gutter */
}
.item img { vertical-align: top; }
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
  .inner { width: 440px; /* (100+5+5)x4 */ }
}
@media (max-width: 441px) {
  .inner { width: 330px; }
}
@media (max-width: 331px) {
  .inner { width: 220px; }
}
@media (max-width: 221px) {
  .inner { width: 110px; }
}

Dalam struktur HTML:

<div class="outer">
  <div class="inner">
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
  </div>
</div>

Pendekatan ini menggunakan pertanyaan media untuk melaraskan lebar div dalam secara dinamik apabila tetingkap penyemak imbas diubah saiz. Lebar dikira dengan mengambil kira saiz setiap imej dan longkang yang dikehendaki di antara mereka. Bilangan imej setiap baris berubah secara automatik berdasarkan lebar penyemak imbas.

Adalah penting untuk ambil perhatian bahawa pengoptimuman kod untuk prestasi disyorkan jika berurusan dengan sejumlah besar imej. Selain itu, pertimbangkan untuk menggunakan prapemproses Flexbox atau CSS untuk penyelesaian yang lebih fleksibel.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Bekas dengan Elemen Kanak-Kanak Jajaran Kiri dan Imej Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!