Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memusatkan Bekas dengan Elemen Kanak-Kanak Jajaran Kiri dan Imej Responsif?

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

Patricia Arquette
Patricia Arquetteasal
2024-11-02 08:42:29769semak imbas

How to Center a Container with Left-Aligned Child Elements and Responsive Images?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn