如何在 CSS 中将同一图像类的多个副本彼此相邻放置？

Question

I am trying to make a flappy bird type game where there will be a row of identical spikes on the bottom of the page. I copy and pasted the image for the spikes 20 times but now I want to use CSS to place all the spike images right next to each other and be on the bottom of the page. Does anyone know how to do this?

    <img class = 'spike1' src = 'spike.png'>

Answer 1

Use display flex?

 .spikes { display: flex } .spikes img { height: 50px; width: 50px }

 <div class="spikes"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> <img src="spike.png"> </div>