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>

來源

2011-08-06 BennyB

刪除浮動從#galleryrow離開並加入浮動留給如下img.landscape。嘗試一下。

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

#galleryrow img.landscape { 
float: left; 
}

來源

2011-08-06 22:36:41 ShankarSangoli

嘿尚卡爾...這似乎並沒有爲我工作。照片之間仍然存在差距......這對你有用嗎？ – BennyB

CSS相冊浮動問題 - 混合景觀和肖像照片

回答

相關問題