如何在网格中布局图像？

Question

我有3行图像。每张图片由以下部分组成：

<span class="tribeimg">
<img src="images/tribes/img.jpg">
<p class="lt-tribe-name">Tribe Name</p>
</span>

使用CSS ..

.tribeimg {
background-color: black;
display: inline-block;
position: relative;
width: 140px;
height: 140px;
}

.tribeimg img {
opacity: 0.7;
position: absolute;
left: 0;
top: 0;
}

.tribeimg img:hover, .tribeimg p:hover {
cursor: pointer;
}

.tribeimg .lt-tribe-name {
opacity: 0.7;
z-index: 11;
color: white;
position: absolute;
left: 32px;
bottom: 50px;
text-shadow: 1px 1px 8px black;
}

您可以在此处查看布局：http://128.199.58.229/landingpage/

图像正确对齐，直到我尝试在图像上添加文字。这打破了布局。

我该如何解决？还是有更好的方法来解决它们？在第二行中，除了没有图像的div块之外，所以它不是一个直接的图像网格。

感谢。

Answer 1

将vertical-align: top添加到.lt-block-tagline。

.lt-block-tagline {
    background-color: #0590A0;
    width: 420px;
    height: 140px;
    display: inline-block;
    color: #FFF;
    font-size: 30px;
    padding: 18px;
    font-family: "Lato";
    line-height: 32px;
    vertical-align: top;
}

---

要删除行之间的间距，请将height: 140px添加到.lt-tribe-img-row。

.lt-tribe-img-row {
    white-space: nowrap;
    overflow: hidden;
    height: 140px;
}

Answer 2

尝试从.tribeimg img

中删除position：absolute

.tribeimg img {
   position: static;
}