Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?

Susan Sarandon
Lepaskan: 2024-10-24 18:45:02
asal
199 orang telah melayarinya

Bertindih Berbilang Imej Sebaris

Anda berhasrat untuk membentangkan satu set imej yang ditindih serupa dengan yang berikut:

How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?

Kod semasa anda:

.avatar img { border-radius: 50%; position: relative; left: -5px; z-index: 1; }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;avatars&quot;&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/70&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/50&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/20&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/100&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;!-- Variable amount more avatars --&gt; &lt;/div&gt; &lt;p&gt;4 People&lt;/p&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p></p>Penyelesaian ini menjajarkan imej secara fleksibel, memastikan susunan yang betul tanpa mengira kiraan imej.<p></p>

Atas ialah kandungan terperinci Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!