1

这里有两个链接，一个是水平图像，另一个是水平和垂直图像的混合。它们都使用同一个 css 文件。因此，每个 div 的图像所在的 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=

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

4

1 回答 1

0

您的第一张图片的高度大于其他图片。你的 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

于 2013-09-02T19:03:01.697 回答