Блог

Главная - Вопросы по программированию - Как отображать изображения рядом?

Как отображать изображения рядом?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Как разместить 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>

Ответ №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>

Ответ №2:

Вот простой способ. Просто используйте flexbox в контейнере.

Все, что я сделал, это добавил приведенный ниже CSS в ваш класс контейнера и ограничил количество изображений в контейнере до 3.

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

Использование Flexbox также будет поддерживать адаптивный макет на настольных и мобильных устройствах.

Запустите фрагмент ниже:

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

Метки: