html - 缩略图库高度问题

Question

我有这个 youtube 视频的缩略图库，其标题如下。 http://skitch.com/subzane/bqgqw/demo

我遇到的问题是，当它们浮动时，它们不会像我喜欢的那样出现，这是因为高度是可变的。几周前我读过一篇博客文章，解决了这个问题，但我在任何地方都找不到。

所以我要的是那个博客文章的链接或者它的内容:)

• 缩略图高度确实不同，我无法将其设置为固定高度。
• 每行的拇指数不同。我无法设置固定数字。
• 没有 JavaScript 修复。只有CSS。

谢谢

Answer 1

而不是浮动 div，您可以将缩略图切换到列表（这实际上在语义上更正确..）

例如：

<style type="text/css">

ul {
    list-type: none;
}

li {
    display: inline;
}
li img {
    vertical-align: top;
    margin-left: 5px;
    padding-bottom: 5px;
}

</style>

<div style="width: 280">
    <ul>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    </ul>
</div>

如需进一步参考，请访问http://www.alistapart.com/articles/practicalcss/

Answer 2

好的。经过几个小时的谷歌搜索，我找到了我想要的东西。

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

这是 display: inline-block 的使用，它解决了我的问题。

Answer 3

身高真的会变化多少？如果它不会有太大变化，那么只需将高度设置为最大值？

对于支持 inline-block 的浏览器：

虽然这是一篇inline-block 跨浏览器文章

#thumbsWrapper div{display:inline-block;vertical-align:top;margin:20px;border:solid 1px #f00;width:180px;}

<div id="thumbsWrapper">
  <div style="height:180px;">
    <img src="thumbnail1.gif" />
  </div>
  <div style="height:240px;">
    <img src="thumbnail2.gif" />
  </div>
  <div style="height:210px;">
    <img src="thumbnail3.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail4.gif" />
  </div>
  <div style="height:300px;">
    <img src="thumbnail5.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail6.gif" />
  </div>
</div>