这个问题在这里已有答案：
因此，如果您查看第二张图像，当文本跨越两行时，它会向上移动。也许这是对我缺少的div容器做些什么？似乎找不到合适的解决方案。我不是超级HTML精明但我确定这是一个简单的修复？ ..救命！
#wrapper {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.thumb {
position: relative;
display: inline-block;
width: 17.6%;
height: auto;
box-sizing: border-box;
margin: 10px 1%;
padding: 0;
text-decoration: none;
}
.thumb p {
font-family: "Helvetica", helvetica;
color: #aaa;
margin-left: 0em;
margin: 0.5em;
}
.thumb img {
width: 100%;
height: 230px;
display: block;
margin: 0 auto;
}<body style="margin: 0px;">
<div id="wrapper">
<h1>GALLERY</h1>
<h2>LENDING LIBRARY</h2>
<a id="Altamont Wet WR" class="thumb" href="openwindow-https://www.urbanelectricco.com/altamontwall.html">
<img src="thumbs/altamontwall_mtn.jpg" />
<p>Altamont Wet WR</p>
<hr>
<h3>'Kromezone' Powder Coat, Clear Glass</h3>
</a>
<a id="Archibald" class="thumb" href="openwindow-https://www.urbanelectricco.com/archibald.html">
<img src="thumbs/archibald_mtn.jpg" />
<p>Archibald WR</p>
<hr>
<h3>Bronze Finish, Clear Glass & Black Finish, Clear Glass
</h3>
</a>
<a id="Belle Meade" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeade.html">
<img src="thumbs/bellemeade_mtn.jpg" />
<p>Belle Meade WL</p>
<hr>
<h3>Vintage Finish</h3>
</a>
<a id="Belle Meade Double" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeadedouble.html">
<img src="thumbs/bellemeadedouble_mtn.jpg" />
<p>Belle Meade Double WL</p>
<hr>
<h3>Polished Nickel Finish</h3>
</a>在所有缩略图中使对齐方式相同的最佳方法是将以下内容添加到.thumb类：
vertical-align:top;
产生问题的原因是任何div的标准垂直对齐是基线（在底部）。当你的文字进入第二行时，它会自然地增加该元素的高度（并且是所有其他标记的高度的两倍），并向上推动该特定div中的所有其他内容。
希望有所帮助！