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

【问题标题】：How do I create variable height rows of images based on the variable height of the images如何根据图像的可变高度创建可变高度的图像行
【发布时间】：2013-09-03 03:03:01
【问题描述】：

这里有两个链接，一个是水平图像，另一个是水平和垂直图像的混合。它们都使用同一个 css 文件。因此，每个 div 的图像所在的 div 都具有相同的固定高度，并且 200 像素的固定高度使第一个组合（仅限水平图像）中的行间距太大。

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=

如果我使用 height:auto;然后它将所有图像都扔到右边（我不明白为什么）。提前致谢。

【问题讨论】：

标签： css

【解决方案1】：

您的第一张图片的高度大于其他图片。你的 div 有 float:left; CSS规则。这意味着如果您设置 height: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

【讨论】：

太棒了！谢谢。我确实必须放置 vertical-align: top;为了让它像以前一样对齐。仍然无法让图像下方的两行文本以图像下方的固定边距浮动。由于某种原因，文本必须有一个固定的 padding-top:265px;为了清除图像。当然有更好的方法。