How to display image side by side?

Question

How do place 2 image side by side and then have another line with 2 images side by side? Sorry for asking

<div class="container">
<audio id="a" src="../Media/Sound/a.mp3"></audio>
<img class="static" src="../Media/Static_Characters/a.png" alt="No Image">
<img class="active" src="../Media/Gifs/a.gif" alt="No Image">
<p class="center">a</p>

<audio id="a" src="../Media/Sound/a.mp3"></audio>
<img class="static" src="../Media/Static_Characters/a.png" alt="No Image">
<img class="active" src="../Media/Gifs/a.gif" alt="No Image">
<p class="center">a</p>

<audio id="a" src="../Media/Sound/a.mp3"></audio>
<img class="static" src="../Media/Static_Characters/a.png" alt="No Image">
<img class="active" src="../Media/Gifs/a.gif" alt="No Image">
<p class="center">a</p>       
          
                

             

Answer 1

You can use display-block in your image and set vertical-align to top in your image

CSS

img {display:inline-block;vertical-align:top;}

HTML

Also there is no closing in your audio tag. I've re edited it for you.

<div class="container">
<audio id="a" src="../Media/Sound/a.mp3"></audio>
<img class="static" src="../Media/Static_Characters/a.png" alt="No Image">
<img class="active" src="../Media/Gifs/a.gif" alt="No Image"/>
<p class="center">a</p>

<audio id="a" src="../Media/Sound/a.mp3"></audio>
<img class="static" src="../Media/Static_Characters/a.png" alt="No Image">
<img class="active" src="../Media/Gifs/a.gif" alt="No Image">
<p class="center">a</p>

<audio id="a" src="../Media/Sound/a.mp3"></audio>
<img class="static" src="../Media/Static_Characters/a.png" alt="No Image">
<img class="active" src="../Media/Gifs/a.gif" alt="No Image">
<p class="center">a</p>       

Answer 2

Here is a simple way. Just use flexbox on the container.

All I did was add the below CSS to your container class and limited the number of images per container to 3.

.container {
display: flex;
flex-direction: row;
}

Using Flexbox will also maintain a responsive layout on desktop and mobile.

Run the snippet below:

 .container { display: flex; flex-direction: row; } /*image styles for example only, all you need is the container CSS*/ img { width: 33%; }

 <div class="container"> <audio id="a" src="../Media/Sound/a.mp3"></audio <img class="static" src="../Media/Static_Characters/a.png" alt="No Image"> <img class="active" src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225_960_720.jpg" alt="No Image"> <p class="center">a</p> <audio id="a" src="../Media/Sound/a.mp3"></audio <img class="static" src="../Media/Static_Characters/a.png" alt="No Image"> <img class="active" src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225_960_720.jpg" alt="No Image"> <p class="center">a</p> <audio id="a" src="../Media/Sound/a.mp3"></audio <img class="static" src="../Media/Static_Characters/a.png" alt="No Image"> <img class="active" src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225_960_720.jpg" alt="No Image"> <p class="center">a</p> </div> <div class="container"> <audio id="a" src="../Media/Sound/a.mp3"></audio <img class="static" src="../Media/Static_Characters/a.png" alt="No Image"> <img class="active" src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225_960_720.jpg" alt="No Image"> <p class="center">a</p> <audio id="a" src="../Media/Sound/a.mp3"></audio <img class="static" src="../Media/Static_Characters/a.png" alt="No Image"> <img class="active" src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225_960_720.jpg" alt="No Image"> <p class="center">a</p> <audio id="a" src="../Media/Sound/a.mp3"></audio <img class="static" src="../Media/Static_Characters/a.png" alt="No Image"> <img class="active" src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225_960_720.jpg" alt="No Image"> <p class="center">a</p> </div>