浮动缩略图库与不同的图像大小 [英] Floating thumbnail gallery with different image sizes
问题描述
网上有几个教程向您展示如何使用浮动缩略图创建一个
缩略图库，该缩略图自动使用所有
水平空间（例如
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画廊------------]
在comp.infosystems中。 www.authoring.stylesheets Florian Brucker说：
网上有几个教程，向您展示如何使用浮动缩略图创建一个缩略图库，自动使用所有可用的水平空间（例如
http://css.maxdesign.com.au/floatuto。 ..orial0407.htm）。然而，他们所有人都使用大小相等的图像 - 而且我的缩略图并非如此。
为图像添加边距，使它们变得大小相同。例如：
10px保证金30px保证金15px保证金
80px图像40px图像70px图像
10px保证金30px保证金15px保证金
等等
你可以手动完成，如果你只有一些图像或一点点乐趣''
giggly服务器端脚本如果你有很多东西就会自动执行。
基本上，如果我将每个图像放在一个带有垂直的表格单元格中，我想要得到的效果-align =在tds上设置中间
div {width：200px; height：200px; display：table-cell; vertical-align：middle; text-align：中心;}
IE不支持
-
littlevoicesmakeme
< blockquote> brucie写道：
为图像添加边距，使它们变得大小相同。例如：
[snip]你可以手动完成，如果你只有一些图像或一些有趣的话，那么，如果你有很多东西的话，可以自动完成它。
我想保持尽可能简单 - 包括组中所有元素的特殊
样式。我只是不喜欢额外的努力
它导致创建和维护。服务器端脚本
会有所帮助，但我还是喜欢CSS解决方案，比如
div {width：200px; height：200px; display：table-cell; vertical-align：中间;文本对齐：中心;}
这看起来是一个不错的解决方案！
IE不支持
好像是''在所有那些只有一点点
高级-css-techniques中的捕获。不是我会关心它:)
谢谢！
Florian
-
在地狱中统治比在天堂服务更好。 （弥尔顿）
[------------ http://www.torfbold.com - POV-Ray gallery ------------]
Florian Brucker< to**@torfbold.com>写道：
我试过的所有方法都会将行的图像对齐在行的顶部或
，而不是在行的中间。
只有底部对齐才会产生正确的包装。
基本上，如果我把每个图像放在
中，我想要得到的效果在tds上设置vertical-align = middle的表格单元格（当可用宽度改变时，+列自动更改）。
停止想要的是可能是最好的建议。
第二个最好的方法是将每个图像包装成一个内嵌块级别
容器，它的高度固定在@相同作为最高的形象。
请注意，在尝试这样做时会遇到很多问题。
Mozilla不支持内联块和/或内联表，IE'的b
破坏/有限支持内联块，复杂的方法需要
垂直居中图像等。（Lauri R. has一个垂直的页面
中心指针你应该沿着这条路走下去。）
-
Spartanicus
There are several tutorials on the net showing you how to create a
thumbnail gallery with floating thumbails which automagically uses all
horizontal space available (e.g.
http://css.maxdesign.com.au/floatuto...orial0407.htm). However all
of them use images which are all equal in size - and that''s not the case
with my thumbnails. The method itself still works, however I want to
center all the images in a row vertically with the highest image (in
that row). Like that:
xxxxxxxxxx
xxxxxxxxxx x x
xxxxxxxxxx x x x x
x x x x x x
x x x x x x
xxxxxxxxxx x x x x
xxxxxxxxxx x x
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx x x
x x x x xxxxxxxxxx
x x x x x x
x x x x x x
x x x x xxxxxxxxxx
xxxxxxxxxx x x
xxxxxxxxxx
All methods I tried will align the images of a row either on the top or
on the bottom of a row, not at the middle.
Basically, I want to have the effect I would get if I put each image in
a table cell with vertical-align=middle set on the tds (+ the
automatical 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 ------------]
In comp.infosystems.www.authoring.stylesheets Florian Brucker said:
There are several tutorials on the net showing you how to create a
thumbnail gallery with floating thumbails which automagically uses all
horizontal space available (e.g.
http://css.maxdesign.com.au/floatuto...orial0407.htm). However all
of them use images which are all equal in size - and that''s not the case
with my thumbnails.
add margins to the images so they become all the same size. e.g:
10px margin 30px margin 15px margin
80px image 40px image 70px image
10px margin 30px margin 15px margin
etc etc
you can do it manually if you only have a few images or a bit of fun ''n
giggly server side scripting to do it automatically if you have a lot.
Basically, I want to have the effect I would get if I put each image in
a table cell with vertical-align=middle set on the tds
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 e
brucie wrote:add margins to the images so they become all the same size. e.g: [snip] you can do it manually if you only have a few images or a bit of fun ''n
giggly server side scripting to do it automatically if you have a lot. I''d like to keep it as simple as possible - that includes no special
styles for all elements of a group. I just don''t like the extra effort
it''s causing both in creating and maintaining. The server side scripting
would help, but I still prefer CSS solution like
div{width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center;} That looks like a nice solution!
not supported by IE
Seems like that''s the catch in all those "only a bit more
advanced"-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 ------------]
Florian Brucker <to**@torfbold.com> wrote:
All methods I tried will align the images of a row either on the top or
on the bottom of a row, not at the middle.
Only bottom aligning will produce proper wrapping.
Basically, I want to have the effect I would get if I put each image in
a table cell with vertical-align=middle set on the tds (+ the
automatical change of columns when the available width changes).
Stop wanting that is probably the best advice.
Second best would be to wrap each image in a inline-block level
container 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''s
broken/limited support of inline-block, convoluted methods needed to
vertically center the images etc. (Lauri R. has a page with vertical
centering pointers should you want to go down that route).
--
Spartanicus
这篇关于浮动缩略图库与不同的图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
