0
我想有一個畫廊頁面,顯示一個網格的照片。照片的順序相當重要,需要按照從左到右的順序排列。另外,佈局需要具有響應性,根據頁面大小的不同列數。如果所有的照片都是風景,那麼這不是問題。目前,我正在做這個如下:響應式畫廊與景觀和肖像圖像
HTML
<div class="thumbcontainer">
<?php
for ($i=1; $i<=27; $i++){
echo '<a class="thumbnail" href="gallery/image.php?image=' . $i . '"><img src="gallery/thumbnails/image_' . $i . '.jpg" width="100%"></a>' . "\n";
}
?>
</div>
CSS
@media all and (min-width: 905px){
.thumbnail{
width: 19%;
}
}
@media all and (max-width: 904px){
.thumbnail{
width: 24%;
}
}
.thumbcontainer{
width: 100%;
display: block;
text-align: center;
padding-top: 3px;
}
.thumbnail{
display: inline-block;
text-align: center;
padding-bottom: 8px;
margin-left: 2px;
margin-right: 2px;
}
的問題是,我希望能夠有肖像圖片的網格太佔用兩排網格(它們的寬度與橫向寬度相同,高度也是兩倍),同時保持網格的響應性。例如,如果L表示橫向和P畫像,而數字表示圖像號,則網格可能看起來像這樣:
L1 L2 P3 L4
P5 L6 P3 L7
P5 L8 L9 L10
有沒有辦法做到這一點?我到處搜索,並絞盡腦汁,但無法事先了解所需的列數/行數以及訂單中肖像圖像的位置。任何指針將不勝感激。