CSS:如何将本页最后一张照片设为 'raise'？

Question

我试图在此页面中显示四张照片:

http://progenygenealogy.com/products/family-tree-charts/photo-gallery-2.aspx

我怎样才能让左下角的照片上升并填补上面的空白？我使用什么“ float ”组合？

这是 CSS 的概要:

<img style="float: left;" src="/portals/0/images/Gallery/Shanahan family circle.jpg" />
<img style="float: left;" src="/portals/0/images/Gallery/WC2.jpg" />
<img style="float: left;" src="/portals/0/images/Gallery/WC3.jpg" />
<img style="float: left;" src="/portals/0/images/Gallery/LT.jpg" />

Answer 1

如果您正在寻找通用解决方案(这意味着您不知道图像大小、图像数量并且不想手动使用负上边距)，您必须使用multicolumn(支持在 IE9+ 中)，在带有前缀的非 IE 浏览器中。

http://caniuse.com/#feat=multicolumn

这种情况下可以使用负的top margin，但是需要手动设置或者通过JS统计。除了我上面写的那个之外，纯 CSS 解决方案不存在。