如何在網格中排列圖像？

-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

如何在網格中排列圖像？

回答

相關問題