缩略库高度的问题

Question

我有个画廊的缩略youtube视频带自己的标题下。http://skitch.com/subzane/bqgqw/demo

我的问题是，当浮动他们，他们不会出现，因为我喜欢，这是因为高度是可变的。我读过一篇博客几个星期前解决这一问题，但我找不到它的任何地方。

所以我要求的链接，博客或者它的内容真:)

• 缩略高度不同，我不能设置这一固定高度。
• 数量的指每个排有所不同。我不能设定一个固定的数目。
• 没有javasscript修正。只css。

谢谢你

Answer 1

"确定"。以后多小时的搜索我找到了我一直寻找的。

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

这是一个利用的显示：内联块，解决我的问题。

Answer 2

而不是漂浮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 3

有多少是真的会有所不同?如果它不会改变那么多刚刚成立的高度的麦克斯？

浏览器，支持内联块：

虽然这里有一个 内联块跨浏览器 文章

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