Как сделать так, чтобы figure не занимал всю ширину сайта?

Question

[NosferatuZodd]

Я пытался сделать через display: inline-block но ничего не работало. Figure и figcaption я использую для того чтобы делать подписи к картинкам:

<div class="hovergallery">
        <figure>
          <img src="img/2.jpg" />
          <figcaption>Пьетро Бенвенути в эпоху Кановы</figcaption>
        </figure>
        <img src="img/3.jpg" />
        <img src="img/4.jpg" />
        <img src="img/5.jpg" />
        <img src="img/6.jpg" />
        <img src="img/7.jpg" />
      </div>

css:

img {
    width: 25%;
    height: 25%;
}
.hovergallery img{
    transform:scale(0.8); 
    transition-duration: 0.5s; 
    margin: 10px 10px 0 50px; 
}
    
.hovergallery img:hover{
    transform:scale(1.3); 
}

Comments

[Danny Arty]

Так это же блочный элемент. Раз не нужно, чтобы элемент занимал всю ширину, задайте ему свое значение в width. А вообще хотелось бы понять чего вы хотите добиться? В одну строчку выставить все изображения? Если да, то оберните все в общий контейнер и задайте ему display: flex. Подробнее тут

[Ankhena]

Смотрите, вот я задала inline-block для figure и она перестала растягиваться на всю ширину...
https://codepen.io/AnnaSummer/pen/YzLBEGr

В современном мире для построения сеток используют флексы и гриды, а не инлайн-блоки.
А для ширины можно задавать fit-content, min-content, max-content

На будущее: всегда делайте песочницы, в которых можно увидеть что именно у вас не получилось.

Answer 1

[Noder SS]

Добавьте figure display:inline; Или же нужно просто разместить картинки в ряд? Используйте flexbox, могу помочь с этим

Comments

[NosferatuZodd]

Да, нужно разместить картинки в ряд, буду рад помощи

[Noder SS]

NosferatuZodd, с кодом сложно разобраться, объясните, как все должно быть