CSS Фотогалерея Плавающий выпуск - смешанные фотографии пейзажей и портретов - PullRequest
Новая
       18

CSS Фотогалерея Плавающий выпуск - смешанные фотографии пейзажей и портретов

1 голос
/ 07 августа 2011

Что всем,

Так что я немного боролся с этим и, похоже, не понимаю.

Я хочу иметь фотогалерею, которая бы совмещала фотографии Пейзажа и Портрета и не оставляла пустых мест (если, конечно, в самом конце галереи, если это необходимо).

Мы будем изменять размеры изображений, которые растягиваются до 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>

1 Ответ

0 голосов
/ 07 августа 2011

Удалите float left из #galleryrow и добавьте float left в img.landscape, как показано ниже. Попробуй. 

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

#galleryrow img.landscape {
 float: left;
}
...