Javascript 如何并排显示图像？

如何将两个图像并排放置，然后再将另一行中的两个图像并排放置？ 很抱歉问你

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

             

a
a
a

您可以在图像中使用

显示块

，并将图像中的

垂直对齐

设置为

顶部

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>       

a
a
a

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

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

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

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

运行以下代码段：

.container{
显示器：flex；
弯曲方向：行；
}
/*例如，图像样式，您所需要的只是容器CSS*/
img{
宽度：33%；
}