создание изображений в семантической фигуре, ориентированной горизонтально - PullRequest
Новая
       22

создание изображений в семантической фигуре, ориентированной горизонтально

0 голосов
/ 27 ноября 2018

Я пытаюсь сделать изображения в тегах рисунков ориентированными по горизонтали, либо помещая их все в один тег рисунка, либо помещая их в 5 и возясь с ними сразу.display: inline-block, float: left, margin: left / right или position: absolute ничего не делать (крайнее левое изображение «переполняется» вверху справа, если окно становится слишком большим, но все ониподряд, если окно достаточно маленькое) и общий поиск в Google не дает мне ничего о семантической фигуре css, чтобы узнать больше о ... вот мой css и код: 

figure{
display:inline-block;
float:left;
margin-top:25%;
padding-right:10px;
width:7em;
clear:inline;
}
figure img{
height:100px;
width:150px;
}
figcaption{
text-align:center;
}

html: 

<figure>
<img src="./images/exmachina.png" 
alt="Ex Machina">
<figcaption>Ex Machina - Sniper 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/urielsgift.jpg" 
alt="Uriel's Gift">
<figcaption>Uriel's Gift - Auto 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/chaosdogma.png" 
alt="Chaos Dogma">
<figcaption>Chaos Dogma - Scout 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/nergalpr4.jpg" 
alt="Nergal PR4">
<figcaption>Nergal PR4 - Pulse 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/susanoo.png" 
alt="Susanoo">
<figcaption>Susanoo - Fusion 
Rifle</figcaption>
</figure>
...