Question

我有一个youtube视频的缩略图，其标题位于。 http://skitch.com/subzane/bqgqw/demo

我遇到的问题是，当它们浮动时它们并不像我喜欢的那样出现，这是因为高度是可变的。几个星期前我已经阅读了一篇博文，解决了这个问题，但我无法在任何地方找到它。

所以我要求链接到该博客文章或其中的内容：）

缩略图高度确实有所不同，我无法将其设置为固定高度。
每行的拇指数不尽相同。我无法设置固定的数字。
没有javasscript修复。只有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

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

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

虽然这是一篇inline-block cross browser文章

#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>

Answer 3

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

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

使用display：inline-block解决了我的问题。

缩略图库高度问题

3 个答案: