具有不同大小的图像缩略图和上方对齐文本的响应式网格

Question

我正在尝试修复以下 css/markdown/HTML 代码，以便它能够在移动设备和较小的网络浏览器上正确响应：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.thumbnail1 {
    background-color: black;
    height: 200px;
    display: inline-block; 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

<style>
.thumbnail2 {
    background-color: black;
    height: 230px;
    display: inline-block; 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

### Book

<p style="font-size: 11.5pt; width: 47%; text-align: left; margin-right: 3%;">"<a href="Book link">Book Title</a>." Under contract with <b><i>Publisher</i></b> (w/ coauthor 1 & coauthor).<br><a href="link for Book image"><img src="image source file for Book" class="thumbnail1" style="max-width: 100%;"></a></p> 

### Peer-Reviewed Articles 

<p style="float: left; font-size: 11.5pt; text-align: left; width: 47%; margin-right: 3%; margin-bottom: 0.5em;">"<a href="article 1 link">Article 1 Title</a>."<b><i> Article 1 Journal</i></b> (w/ coauthor).<a href="Article 1 link"><img src="image source file for Article 1" class="thumbnail1" style="max-width: 100%;"></a></p>
<p style="float: right; font-size: 11.5pt; text-align: left; width: 47%; margin-left: 3%; margin-bottom: 0.5em;">"<a href="Article 2 link">Article 2 Title</a>."<b><i> Article 2 Journal</i></b> (w/ coauthors).<a href="link for Article 2 image"><img src="image source file for Article 2" class="thumbnail2" style="max-width: 100%;"></a></p> 
<div style="clear:both"></div>

它在电脑上完美运行，生成以下完美排列的图像和文本：

但是，在移动设备上或使用一半大小的互联网 window，所有内容都会被压扁并且无法按照以下方式很好地排列：

如何更改代码，使网格在移动设备或更窄的网络浏览器上变成一个图块 - 即，像这样？

Answer 1

我自己用这两个页面解决了这个问题：page 1 and page 2。这是修改后的 CSS:

.thumbnail1 {
    background-color: black;
    height: 200px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.thumbnail2 {
    background-color: black;
    height: 228px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card {
  margin-bottom: 0.25em;
  padding: 0.75em;
}

.cards {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-gap: 0.25em;
}

@media (min-width: 650px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

这里是修改后的代码：

<h2>Book</h2>

<div class="cards">
<div class="card">
<p style="font-size: 11.5pt; text-align: left; margin-bottom: 0.5em;">"<a href="Book link">Book Title</a>." Under contract with <b><i>Publisher</i></b> (w/ coauthor 1 & coauthor).<br><a href="link for Book image"><img src="image source file for Book" class="thumbnail1" style="width: 90%;"></a></p></div>
</div>

<h2>Published Academic Articles</h2>
<div class="cards">
<div class="card">
<p style="font-size: 11.5pt; text-align: left; margin-bottom: 0.5em;">"<a href="article 1 link">Article 1 Title</a>."<b><i> Article 1 Journal</i></b> (w/ coauthor).<a href="Article 1 link"><img src="image source file for Article 1" class="thumbnail1" style="width: 90%;"></a></p></div>
<div class="card">
<p style="font-size: 11.5pt; text-align: left; margin-bottom: 0.5em;">"<a href="Article 2 link">Article 2 Title</a>."<b><i> Article 2 Journal</i></b> (w/ coauthors).<a href="link for Article 2 image"><img src="image source file for Article 2" class="thumbnail2" style="width: 90%;"></a></p></div>
</div>

我为 img 添加了 style: "width: 90%;，因为 text-align: left 不是完全合理的。这样，图片就不会出现在不对齐的文字之外了。

具有不同大小的图像缩略图和上方对齐文本的响应式网格

Responsive grid with different-sized image thumbnails and aligned text above

html

css

markdown