2

我想创建一个简单的缩略图网格来显示来自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&amp;size=LARGE&amp;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&amp;size=LARGE&amp;type=TEXT"/>
    </div> 
....
4

2 回答 2

1

损坏的格式是因为第二个示例中的某些图像更高。较高的图像占用更多空间，并且由于缩略图已float:left设置，它们会在较高的图像周围流动。这解释了为什么第一个示例有效，因为它们都具有相同的高度。

也就是说，在应用浮点数时float:left也会覆盖display:inline-blockwith display:block- see css display 属性

如果您删除float:left或设置类的高度，.thumb缩略图也将按预期排列。

于 2012-10-31T13:21:53.893 回答
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&amp;size=LARGE&amp;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&amp;size=LARGE&amp;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&amp;size=LARGE&amp;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&amp;size=LARGE&amp;type=TEXT"/>
   </div>
于 2012-10-31T13:04:34.630 回答