How can I place multiple copies of the same image class next to each other in 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>