我想创建一个简单的缩略图网格,用于显示Europeana API中的图像。然而,对于一些奇怪的,可能非常明显的原因,我在这个网格中获得具有大空格的随机行,就像浮动不起作用一样。然而,随机图像(http://placehold.it/250x350)的相同布局似乎没有这个问题。在这里查看html和css的结果:http://jsfiddle.net/VqJzK/1/。
网格的CSS
.thumb {
width: 200px;
background-color: #F5F5F5;
border-radius: 5px;
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: left;
position: relative;
display: inline-block;
float: left;
}
.thumb img {
width: 150px;
vertical-align: middle;
}
和html:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
....
答案 0 :(得分:1)
格式化损坏是因为某些图像在第二个示例中较高。较高的图像占用更多空间,并且由于缩略图设置为float:left
,因此它们围绕较高的图像流动。这解释了为什么第一个例子有效,因为它们都具有相同的高度。
尽管如此,float:left
也覆盖display:inline-block
与display:block
- 请参阅css display property when a float is applied
如果删除float:left
或设置.thumb
类的高度,缩略图也会按预期排列。
答案 1 :(得分:0)
听起来像标准inline-block
错误,简单的解决方法是将代码更改为:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
将元素紧挨着彼此对接,因为它被视为元素之间的inline
空格很重要,因为文本本身是inline
或者你可以使用这样的评论:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><!--
--><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>