Уникальный Figcaption изменяет размер изображения в сетке - PullRequest
Новая
       14

Уникальный Figcaption изменяет размер изображения в сетке

0 голосов
/ 20 января 2019


При тестировании настольной версии шаблона, который я создаю в Chrome, я заметил, что мои figcaptions одинаковы (пример: заголовок) или похожи (пример: заголовок один ... заголовок второй), мои изображения и заголовок выровнены нормально. Как только я делаю их уникальными, изображения начинают меняться, и ничего не выравнивается правильно. Я не добавляю никаких сумасшедших заголовков, просто одно или два описания слов, таких как «Hello World» или «Example Caption». Я проверил его с помощью инструментов разработчика и просмотрел несколько других сообщений о переполнении стека о проблемах, связанных с figcaptions, но, похоже, замечание работает. Все мои изображения одинакового размера. Я уверен, что это что-то простое, что я просто упускаю из виду, но я был бы признателен за новый взгляд на данный момент. Заранее спасибо за ваше время и помощь. 

* {
  margin: 0;
  padding: 0;
}

.content-section {
  display: grid;
  grid-template-columns: auto auto auto;
}

figure img {
  width: 100%;
  height: auto;
}
<!--lines up correctly-->
<section class="content-section">
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption</figcaption>
  </figure>
</section>

<!--lines up incorrectly-->
<section class="content-section">
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Some Words</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Hello World</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Something Else</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Caption Five</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/640x360" alt="">
    <figcaption>Example</figcaption>
  </figure>
</section>

1 Ответ

0 голосов
/ 20 января 2019

и отвечая на мой собственный вопрос ... 

.content-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Идеально выравнивается

...