Question

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

Answer 1

回答我自己的问题...

git checkout origin/development -- .

排列完美

唯一的Figcaption更改网格布局中的图像大小

1 个答案: