缩略图库高度问题答案

【问题标题】：Thumbnail gallery height problem缩略图库高度问题
【发布时间】：2010-10-23 23:41:18
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

标签： html css thumbnails

【解决方案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/

【讨论】：

这个问题是我不知道新行何时开始。它可能在 2 件或 20 件之后。
好的..那么你到底想要做什么？我创建了一个简单的测试页面，它将 div 包装的图像浮动到左侧（在容器中），并且它们都以列格式显示。我错过了什么？
我已经修改了我原来的答案，不再使用浮动 div，而是使用无序列表。
我附上了屏幕截图，并详细写了我需要做的事情。我不知道该怎么解释了。

【解决方案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>

【讨论】：

就像我在我的问题中写的那样。缩略图高度确实有所不同，我无法将其设置为固定高度。所以这不是我的问题的解决方案。不过感谢您的宝贵时间

【解决方案3】：

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

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

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

【讨论】：