CSS 照片库浮动问题 - 混合景观和景观肖像照片
大家怎么了，
所以我已经为此苦苦挣扎了一段时间，但似乎无法理解。
我想要一个适合风景和风景的照片库。肖像照片在一起&不会留下任何空白（当然，除非有必要在画廊的最后）。
我们将调整拉入的图像大小为 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>
Whats up everybody,
So I've been struggling with this for a bit and can't seem to get it.
I want to have a photo gallery that fits Landscape & Portrait photos together & doesn't leave any blank space (unless of course on the very end of the gallery if necessary).
We'll be resizing the images that are pulled in to 2 sizes (seen in the css below)...but then i can't figure out how to place them together to fit nicely.
I'm open to any ideas (so it doesn't necessarily have to be just css - although that would be preferred if its possible). This may be something small i'm overlooking. But the code is below - Notice the blank spaces between the photos when a portrait photo can't float all the way to the left.
Thanks a ton...
#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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
从 #galleryrow 中删除左浮动并将左浮动添加到 img.landscape 中，如下所示。尝试一下。
Remove float left from #galleryrow and added float left to img.landscape as below. Try it.