浮动缩略图库与不同的图像大小

本文介绍了浮动缩略图库与不同的图像大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 网上有几个教程向您展示如何使用浮动缩略图创建一个 缩略图库，该缩略图自动使用所有 水平空间（例如 http://css.maxdesign.com.au/floatuto .. .orial0407.htm）。然而，所有 他们都使用大小相等的图像 - 而且我的缩略图并非如此。 。该方法本身仍然有效，但是我希望 将所有图像连续居中放在最高的图像中（在该行中为）。就像那样： xxxxxxxxxx xxxxxxxxxx xx xxxxxxxxxx xxxx xxxxxx xxxxxx xxxxxxxxxx xxxx xxxxxxxxxx xx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xx xxxx xxxxxxxxxx xxxxxx xxxxxx xxxx xxxxxxxxxx xxxxxxxxxx xx xxxxxxxxxx 我尝试的所有方法都会将行的图像对齐在顶部或 的行底部，不是在中间。 基本上，如果我将每个图像放在 a表格单元格中，我想得到的效果是vertical-align = middle设置在tds上（当可用宽度改变时，+ 自动更改列）。 An y提示？ 谢谢， Florian - 先生，我们被包围了！ - 优秀！现在我们可以向任何方向攻击 [------------ http://www.torfbold.com - POV-Ray画廊------------] 解决方案 div {width：200px; height：200px; display：table-cell; vertical-align：middle; text-align：中心;} IE不支持 - littlevoicesmakeme brucie写道： 好​​像是''在所有那些只有一点点 高级-css-techniques中的捕获。不是我会关心它:) 谢谢！ Florian - 在地狱中统治比在天堂服务更好。 （弥尔顿） [------------ http://www.torfbold.com - POV-Ray gallery ------------] 停止想要的是可能是最好的建议。 第二个最好的方法是将每个图像包装成一个内嵌块级别 容器，它的高度固定在@相同作为最高的形象。 请注意，在尝试这样做时会遇到很多问题。 Mozilla不支持内联块和/或内联表，IE'的b 破坏/有限支持内联块，复杂的方法需要 垂直居中图像等。（Lauri R. has一个垂直的页面 中心指针你应该沿着这条路走下去。） - Spartanicus There are several tutorials on the net showing you how to create athumbnail gallery with floating thumbails which automagically uses allhorizontal space available (e.g. http://css.maxdesign.com.au/floatuto...orial0407.htm). However allof them use images which are all equal in size - and that''s not the casewith my thumbnails. The method itself still works, however I want tocenter all the images in a row vertically with the highest image (inthat row). Like that:xxxxxxxxxxxxxxxxxxxx x xxxxxxxxxxx x x x xx x x x x xx x x x x xxxxxxxxxxx x x x xxxxxxxxxxx x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x xx x x x xxxxxxxxxxx x x x x xx x x x x xx x x x xxxxxxxxxxxxxxxxxxxx x xxxxxxxxxxxAll methods I tried will align the images of a row either on the top oron the bottom of a row, not at the middle.Basically, I want to have the effect I would get if I put each image ina table cell with vertical-align=middle set on the tds (+ theautomatical change of columns when the available width changes).Any hints?Thanks,Florian--Sir, we are surrounded! - Excellent! Now we can attack in any direction[------------ http://www.torfbold.com - POV-Ray gallery ------------] 解决方案div{width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center;}not supported by IE--l i t t l e v o i c e s m a k e m eSeems like that''s the catch in all those "only a bit moreadvanced"-css-techniques. Not that I would care about it :)Thanks!Florian--Better to rule in Hell than to serve in Heaven. (Milton)[------------ http://www.torfbold.com - POV-Ray gallery ------------]Stop wanting that is probably the best advice.Second best would be to wrap each image in a inline-block levelcontainer with it''s height fixed @ the same as the tallest image.Beware that you will run into loads of problems when trying to do that.Mozilla''s non support of inline-block and/or inline table, IE''sbroken/limited support of inline-block, convoluted methods needed tovertically center the images etc. (Lauri R. has a page with verticalcentering pointers should you want to go down that route).--Spartanicus 这篇关于浮动缩略图库与不同的图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！