CSS 照片库浮动问题 - 混合横向和纵向照片答案

【问题标题】：CSS Photo Gallery Floating Issue - MIxing Landscape & Portrait PhotosCSS 照片库浮动问题 - 混合横向和纵向照片
【发布时间】：2011-08-06 22:30:33
【问题描述】：

大家好，

所以我一直在努力解决这个问题，但似乎无法理解。

我想要一个照片库，可以将横向和纵向照片放在一起，并且不会留下任何空白（当然，如果有必要在画廊的最末端）。

我们会将拉入的图像调整为 2 种尺寸（见下面的 css）...但是我不知道如何将它们放在一起以很好地适应。

我对任何想法都持开放态度（因此它不一定必须只是 css - 尽管如果可能的话，那将是首选）。这可能是我忽略的小事。但代码如下 - 当肖像照片不能一直浮动到左侧时，请注意照片之间的空格。

非常感谢...

#galleryrow {
float: left;
width: 690px;
height: 1600px;
background-color: lightyellow;
margin-left: 60px;
}

#galleryrow img.portrait { 
float: left;
background-color: white;
height: 300px; /*  Height = 300 + 13 + 13 = 326  */
width: 200px; /* Width = 200 + 12 + 12 = 224  */
padding: 13px 12px;
margin-right: 4px;
margin-bottom: 4px;
border: 1px dashed lightgrey;
}

#galleryrow img.portrait:hover {
background-color: #e5e8e7;
height: 300px;
width: 200px;
}

#galleryrow img.landscape {
background-color: white;
height: 130px; /* Height = 130 + 15 + 15 = 160    Multiply by 2 stacked = 320  */
width: 200px;
padding: 15px 12px;
border: 1px dashed lightgrey;

}

#galleryrow img.landscape:hover {
background-color: #e5e8e7;
height: 130px;
width: 200px;
padding: 15px 12px;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery w/ Floats</title>
<link rel="stylesheet" type="text/css" href="floatgallery.css">
</head>

<div id="galleryrow">
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
</div>


</html>

【问题讨论】：

标签： jquery css css-float image-gallery photo-gallery

【解决方案1】：

从#galleryrow 中删除左浮动并将左浮动添加到img.landscape，如下所示。试试看。

#galleryrow {
 /*float: left;*/
}

#galleryrow img.landscape {
 float: left;
}

【讨论】：

嘿 Shankar...这似乎对我不起作用。某些地方的照片之间仍有差距...这对您有用吗？