如何根据图像的可变高度创建可变高度的图像行

Question

这是两个链接，一个是水平图像，另一个是水平和垂直图像的混合。它们都使用相同的css文件。因此，每个图像所在的div具有相同的固定高度，固定高度为200px，使得第一个投资组合中的行间距（仅水平图像）过多。

http://www.photoeye.com/gallery/forms2/index.cfm?image=1&id=195494&imagePosition=1&Door=2&Portfolio=Portfolio6&Gallery=2

http://www.photoeye.com/gallery/forms2/index.cfm?image=1&id=185363&imagePosition=1&Door=2&Portfolio=Portfolio13&Gallery=2&Page=

如果我使用身高：自动;然后它将所有图像抛向右边（我不明白为什么）。提前致谢。

Answer 1

您的第一张图片的高度比另一张图片高。你的div有浮动：左; CSS规则。这意味着如果你设置高度：auto;如果你的图像有不同的高度，第二行将在图像结束后以最大高度开始（在你的情况下是图像№1）。

设置display:inline-block;而不是float:left;

#Img_Container div {
   display: inline-block;
   height: auto;
   margin: 10px 7px 10px 10px; /*I change margin-right because inline-block elemets have margin-right:3px; by default */
   width: 150px;}

此链接可以帮助您完成第二次演示http://isotope.metafizzy.co/demos/images.html