How to put images side by side in html

Question

I'm pretty new to html/css and I've looked around for hours but can't seem to make these images line up side by side. My idea is to make a lobby for a game and I want to display all of the players side by side along with their names below them, although all I ask is how to get these images to line up horizontally. Then I will worry about putting text beneath them later. HTML:

  <div class= = "container">
<div class = "row">
  <div class = "column" id = "player1" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player2" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player3" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player4" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player5" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
</div>

Answer 1

please try to add this code in your CSS might work for you

.row { display: flex;}