时间戳

首页 > 解决方案 > 独特的 Figcaption 更改网格布局中的图像大小

html - 独特的 Figcaption 更改网格布局中的图像大小

问题描述


在测试我在 Chrome 中创建的模板的桌面版本时，我注意到当我的 figcaptions 都相同（例如：Caption）或相似（例如：Caption One...Caption Two）时，我的图像和标题排列得很好。一旦我使它们独一无二，图像就会开始改变大小，并且没有任何东西可以正确排列。我没有添加任何疯狂的字幕，只是简单的一两个单词描述，例如“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>

标签： htmlcssgridfigure

解决方案

并回答我自己的问题...

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

排队完美

推荐阅读