Помогите с вёрсткой!

Question

Картинка "Афера по-голливудски" вылазит из всех картинок, почему так происходит?

<article class="article">
        <div class="novinki">Новинки</div>      
        <figure class="f1">   
        <a href="/"><img id="jpg1" src="image/1.jpg"></a>   
        <figcaption>Мортал Комбат</figcaption>
        </figure>           
        <figure class="f2">
        <a href="/"><img id="jpg2" src="image/2.jpg"></a>
        <figcaption>Дальний Космос</figcaption>
        </figure>           
        <figure class="f3"> 
        <a href="/"><img id="jpg3" src="image/3.jpg"></a>       
        <figcaption>Игры Шпионов</figcaption>
        </figure>           
        <figure class="f4">   
        <a href="/"><img id="jpg4" src="image/4.jpg"></a>   
        <figcaption>Никто</figcaption>
        </figure>           
        <figure class="f5">
        <a href="/"><img id="jpg5" src="image/5.jpg"></a>        
        <figcaption><a href="/">Афера по-<br>голливудски</a></figcaption>
        </figure>           
        <figure class="f2">
        <a href="/"><img id="jpg6" src="image/6.jpg"></a>  
        <figcaption>Заступник</figcaption>
        </figure>
        
    </article>


figure {
   display: inline-block;
}

Answer 1

Потому что у тебя текста - название фильма на две строки. Можешь решить, задав для класса отвечающего за название фильма min-height

Answer 2

Сетку лучше строить на display grid или flex. Сейчас inline-block не используется для сетки. С помощью flex ты сможешь выровнять контент по верхней части

       <div class="grid">
        <figure class="f1">   
          <a href="/"><img id="jpg1" src="image/1.jpg"></a>   
          <figcaption>Мортал Комбат</figcaption>
        </figure>           
        <figure class="f2">
          <a href="/"><img id="jpg2" src="image/2.jpg"></a>
          <figcaption>Дальний Космос</figcaption>
        </figure>           
        <figure class="f3"> 
          <a href="/"><img id="jpg3" src="image/3.jpg"></a>       
          <figcaption>Игры Шпионов</figcaption>
        </figure>           
        <figure class="f4">   
          <a href="/"><img id="jpg4" src="image/4.jpg"></a>   
          <figcaption>Никто</figcaption>
        </figure>           
        <figure class="f5">
          <a href="/"><img id="jpg5" src="image/5.jpg"></a>        
          <figcaption><a href="/">Афера по-<br>голливудски</a></figcaption>
        </figure>           
        <figure class="f2">
          <a href="/"><img id="jpg6" src="image/6.jpg"></a>  
          <figcaption>Заступник</figcaption>
        </figure>
       </div>
styles:
.grid {
  display: flex; //задаем флекс
  align-items: flex-start; //горизонтальное выравнивание по верху
  flex-wrap: wrap; //перенос внутренних элементов на новую строку при переполнении
}
.gtid capture {
 flex-shrink: 0; //чтобы внутренние элементы сетки не растягивались и сохраняли свои размеры
}

БЛОГ НА HUSL

Помогите с вёрсткой!

Ответы (2 шт):