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>
我有什么改变吗?
这是因为您的图片具有不同的纵横比。您是否愿意将这些风景照片拉伸以适合您的人像照片? – JkAlombro
如果你想拥有不同尺寸的元素,你将不得不手动移动每个位置。 –
@JkAlombro不,我想保持宽高比为原始 –