文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS图片库浮动问题- MIxing风景与肖像照片

问CSS图片库浮动问题- MIxing风景与肖像照片
EN

Stack Overflow用户

提问于 2011-08-07 06:30:33

回答 1查看 1.1K关注 0票数 1

大家好吗，

所以我已经在这个问题上挣扎了一段时间，似乎不能理解它。

我想有一个相册，适合风景和肖像照片在一起，不留任何空白(当然，除非在画廊的最后，如果有必要)。

我们会将拉入的图像调整为2个大小(见下面的css )...but，然后我不知道如何将它们放在一起才能很好地适应。

我对任何想法都持开放态度(所以它不一定只是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>

image-gallery

photo-gallery

jquery

css

css-float

回答 1

Stack Overflow用户

发布于 2011-08-07 06:36:41

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

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

#galleryrow img.landscape {
 float: left;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6969400

复制

相似问题

问CSS图片库浮动问题- MIxing风景与肖像照片
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS图片库浮动问题- MIxing风景与肖像照片EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS图片库浮动问题- MIxing风景与肖像照片
EN