大家好吗
所以我一直在努力解决这个问题，但似乎无法理解。
我想要一个照片库，可以将风景照片和肖像照片放在一起并且不留任何空白(当然，除非必要时在画廊的最后)。
我们会将拉入的图像调整为 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>
最佳答案
从#galleryrow 中删除 float left，并将 float left 添加到 img.landscape，如下所示。试试吧。
#galleryrow {
/*float: left;*/
}
#galleryrow img.landscape {
float: left;
}
关于jquery - CSS 照片库 float 问题 - 混合风景和肖像照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6969400/