2017-04-11 98 views
1

我的展厅看起来像这样删除宽度相同的图像之间的垂直空白: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>

我有什么改变吗?

+0

这是因为您的图片具有不同的纵横比。您是否愿意将这些风景照片拉伸以适合您的人像照片? – JkAlombro

+0

如果你想拥有不同尺寸的元素,你将不得不手动移动每个位置。 –

+0

@JkAlombro不,我想保持宽高比为原始 –

回答

0

尝试移除垂直对齐属性

+0

我应该在哪里移动它? –