CSSフォトギャラリー浮動号 - 風景＆ポートレート写真を混合

は、だから私は少しのためにこれで苦労してきたし、それを得るように見えることはできませんいただきました。

風景に合ったフォトギャラリーを作成したい&似顔絵の写真&は、必要に応じてギャラリーの最後にはっきりと記されていない限り、空白を残しません。

2つのサイズ（下のCSSに表示されている）に引っ張られた画像のサイズを変更していきますが、それでうまく収まるようにそれらを一緒に配置する方法を理解できません。

私はどんなアイデアにも公開しています（必ずしもCSSである必要はありませんが、可能であれば推奨されます）。これは私が見落としている小さなものかもしれません。しかし、コードは以下の通りです。 - ポートレートの写真が左端まで浮くことができない場合、写真間の空白に注意してください。 #galleryrow、コメントを追加しましたフロートから左トン...

#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

削除フロートは以下のようにimg.landscapeために残さ

感謝。それを試してみてください。

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

#galleryrow img.landscape { 
float: left; 
}

出典

2011-08-06 22:36:41 ShankarSangoli

ヘイシャンカー...これは私にとってはうまくいかないようです。場所の写真の間にまだギャップがあります...それはあなたのために働くのですか？ – BennyB

CSSフォトギャラリー浮動号 - 風景＆ポートレート写真を混合

答えて

関連する問題