如何在网格中排列图像？

-2

<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块的例外..所以它不是一个完全直接的图像网格。

谢谢。

来源

2014-12-02 magician11

你加什么短信？路线如何变化？ – 2014-12-02 07:55:28

不知道我已经完全理解了你的想法，但'.lt-block-tagline {vertical-align：top}'似乎至少让事情再次成为一致。 – 2014-12-02 07:55:43

对不起，你不清楚你在这里问什么。 – 2014-12-02 07:57:45

添加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; 
}

enter image description here

为了之间的行添加到height: 140px除去.lt-tribe-img-row的间距。

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

enter image description here

来源

2014-12-02 07:58:59

是的，这工作谢谢:)如何删除行之间的额外间距？ – magician11 2014-12-02 08:05:05

明白了。谢谢。更新了答案，以便将CSS应用于.lt-tribe-img-row – magician11 2014-12-02 08:16:47

尝试删除位置：从.tribeimg IMG

.tribeimg img { 
    position: static; 
}

来源

2014-12-02 07:57:17 kapantzak

根本没有帮助... – 2014-12-02 07:58:45

如何在网格中排列图像？

回答

相关问题