在畫廊

我的展廳看起來像這樣刪除寬度相同的圖像之間的垂直空白：https://drive.google.com/open?id=0BwBGhbPaJU_jdUl3cGdNQjVNVjg 在畫廊

正如你可以看到我的畫廊，我想下面匆匆圖像之間的空間。（箭頭所指）

這裏是我的代碼：

/*Gallery*/ 
 
#works-gallery{ 
 
\t margin:0px; 
 
\t position:relative; 
 
\t top:900px; 
 
\t width:1440; 
 
\t text-align:center; 
 
\t line-height: 0; 
 
\t column-count: auto; 
 
\t column-gap:0px; 
 
\t -webkit-column-count:auto; 
 
\t -webkit-column-gap:0px; 
 
\t -moz-column-count:auto; 
 
\t -moz-column-gap:0px; 
 
} 
 

 
#works-gallery img { 
 
\t postion:relative; 
 
\t display:inline-block; 
 
\t width:480px; 
 
\t height:auto; 
 
\t top:0px; 
 
\t vertical-align:top; 
 
\t padding:0px; 
 
\t border:0px; 
 
}

<div id="works-gallery"> 
 

 
    <img src="http://lorempixel.com/480/320/abstract" class="tile" /><img src="http://lorempixel.com/480/456/city" class="tile" /><img src="http://lorempixel.com/480/456/city" class="tile" /> 
 
    
 
    <td><img src="http://lorempixel.com/480/234/fashion" class="tile" /><img src="http://lorempixel.com/480/567/food" class="tile" /><img src="http://lorempixel.com/480/356/nature" class="tile" /> 
 
     
 
    <img src="http://lorempixel.com/480/678/nightlife" class="tile" /><img src="http://lorempixel.com/480/243/people" class="tile" /><img src="http://lorempixel.com/480/678/sports" class="tile" /> 
 
     
 
    <img src="http://lorempixel.com/480/256/technics" class="tile" /><img src="http://lorempixel.com/480/678/transport" class="tile" /><img src="http://lorempixel.com/480/235/abstract" class="tile" /> 
 
     
 
    <img src="http://lorempixel.com/480/678/animals" class="tile" /><img src="http://lorempixel.com/480/657/city" class="tile" /><img src="http://lorempixel.com/480/789/fashion" class="tile" /> 
 

 
</div>

我有什麼改變嗎？

來源

2017-04-11 Robin Olisa

這是因爲您的圖片具有不同的縱橫比。您是否願意將這些風景照片拉伸以適合您的人像照片？ – JkAlombro

如果你想擁有不同尺寸的元素，你將不得不手動移動每個位置。 –

@JkAlombro不，我想保持寬高比爲原始 –

嘗試移除垂直對齊屬性

來源

2017-04-11 00:23:28 user7847717

我應該在哪裏移動它？ –

回答

相關問題