1
最新了大家,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>
嘿尚卡爾...這似乎並沒有爲我工作。照片之間仍然存在差距......這對你有用嗎? – BennyB