图库中的缩略图描述部分被覆盖 - float:left 问题？
请参阅 http://jsfiddle.net/ZdjrT/ - 前两个缩略图下的文本部分被遮挡。
如果我在描述上设置高度，我可以解决这个问题，但显然描述高度是基于其中有多少内容，所以它不是我可以设置的静态值。
还有其他解决方案吗？
谢谢， 韦斯利
See http://jsfiddle.net/ZdjrT/ - The text under the first two thumbnails is partially obscured.
I can solve this if I set a height on the description, but obviously the description height is based on how much content is in there, so it's not a static value that I can set.
Is there another solution?
Thanks,
Wesley
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
文本被覆盖的原因是它太长，超出了您为
a.thumbnail明确设置的 120px 高度。解决方案是消除该高度声明，但这可能会导致交错的行不对齐。解决方案是使用
display:inline-block而不是float:left。因为您只对自然内联的a元素执行此操作，所以它应该适用于 IE6+。这是证明这一点的小提琴（注意
vertical-align:top）The reason the text is covered up is because it's so long that it overruns the 120px of height you explicitly set for
a.thumbnail. The solution would be to get rid of that height declaration, but that could result in staggered rows that don't line up.The solution for that is to use
display:inline-blockinstead offloat:left. Because you're only doing this onaelements, which are naturally inline, it should work in IE6+.Here's the fiddle to prove it (note the
vertical-align:top)看一下此版本：http://jsfiddle.net/ZdjrT/5/
我将 .thumbnail 显示为内联块并删除了浮动。将高度更改为自动，然后将 img 显示为块元素。似乎可以在 IE7/8、Chrome 和 FF 中使用。
Take a peek at this revision: http://jsfiddle.net/ZdjrT/5/
I made a.thumbnail display as an inline-block and removed the float. Changed the height to auto and then displayed the img as a block element. Seems to work in IE7/8, Chrome and FF.