如何并排显示图像？

Question

如何将 2 张图片并排放置，然后将另一行与 2 张图片并排放置？ 不好意思问了

<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

您可以在图片中使用display-block，并在图片中将vertical-align 设置为top

CSS

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

HTML

您的音频标签中也没有关闭。我已经为你重新编辑了。

<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

这是一个简单的方法。只需在容器上使用 flexbox。

我所做的只是将以下 CSS 添加到您的容器类中，并将每个容器的图像数量限制为 3。

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

使用Flexbox 还将在桌面和移动设备上保持响应式布局。

运行下面的sn-p：

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