Bagaimana untuk mencapai imej bersebelahan dalam javascript

Dalam reka bentuk web, gambar sering digunakan dan dipaparkan sebelah menyebelah, seperti dalam paparan produk atau dalam laporan berita. Bagaimana untuk mencapai gambar sebelah menyebelah? Berikut akan memperkenalkan cara menggunakan JavaScript untuk mencapai imej sebelah menyebelah.

1. Gunakan reka letak Flexbox

Flexbox ialah mod reka letak baharu dalam CSS3 yang boleh menjajarkan dan menyusun elemen dengan mudah. Menggunakan reka letak Flexbox, kami boleh memaparkan imej sebelah menyebelah dengan mudah.

Mula-mula, anda perlu menyediakan bekas dalam CSS, tetapkan sifat paparan bekas itu kepada lentur, dan kemudian balut imej yang perlu dipaparkan bersebelahan dalam bekas. Seterusnya, anda boleh melaraskan saiz dan kedudukan imej dengan menetapkan sifat flex elemen dalam bekas.

kelihatan seperti ini:

Kod HTML:

<div class="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

Kod CSS:

.container {
  display: flex;
  justify-content: space-between;
}

2. Gunakan sifat CSS Float

Sifat CSS Float mengapungkan elemen di sepanjang sebelah kiri atau kanan bekasnya, dengan elemen lain mengelilinginya. Gunakan atribut ini untuk memaparkan imej sebelah menyebelah.

Pertama, anda perlu menetapkan atribut apungan bagi imej yang perlu dipaparkan sebelah menyebelah dalam CSS, dan tetapkannya ke kiri atau kanan. Seterusnya, anda boleh menggunakan sifat margin untuk melaraskan jarak imej.

kelihatan seperti ini:

Kod HTML:

<div class="container">
  <img src="image1.jpg" alt="image1" style="float: left;">
  <img src="image2.jpg" alt="image2" style="float: right;">
  <img src="image3.jpg" alt="image3" style="float: left;">
</div>

Kod CSS:

.container img {
  margin: 10px;
}

3. Reka letak menggunakan Grid CSS

Reka letak Grid CSS ialah reka letak seperti jadual yang boleh membahagikan halaman kepada baris dan lajur serta lebih fleksibel daripada reka letak Flexbox. Menggunakan reka letak Grid CSS, anda boleh memaparkan imej sebelah menyebelah dengan mudah.

Mula-mula, anda perlu menyediakan bekas dalam CSS, tetapkan sifat paparan bekas itu kepada grid, dan kemudian tetapkan lebar lajur imej melalui sifat grid-template-columns. Seterusnya, anda boleh meletakkan gambar yang perlu dipaparkan sebelah menyebelah ke dalam grid dan melaraskan kedudukan dan saiz gambar.

kelihatan seperti ini:

Kod HTML:

<div class="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

Kod CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container img {
  width: 100%;
  height: auto;
}

Kod di atas membahagikan bekas kepada tiga lajur, setiap Lajur adalah sama lebar dengan jarak 10px. Lebar imej ditetapkan kepada 100% dan ketinggian adalah adaptif.

Ringkasan

Di atas memperkenalkan tiga cara untuk menggunakan JavaScript untuk mencapai imej bersebelahan: menggunakan reka letak Flexbox, sifat CSS Float dan reka letak Grid CSS. Setiap kaedah ini mempunyai kelebihan dan kekurangannya sendiri, dan boleh dipilih mengikut keperluan tertentu. Sama ada cara, anda boleh memaparkan imej sebelah menyebelah dengan mudah untuk menjadikan halaman web anda lebih cantik dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk mencapai imej bersebelahan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!