CODEWITHSUNDEEP
htmlcssgame-development
kyoto
kyoto

Reputation: 21

How can I place multiple copies of the same image class next to each other in CSS?

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'>

Upvotes: 0

Views: 67

Answers (1)

Simp4Code
Simp4Code

Reputation: 1479

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>

Upvotes: 1

Related Questions