【发布时间】：2014-09-24 22:34:09
【问题描述】：
我想要一个显示照片网格的图库页面。照片的顺序相当重要，需要从左到右排成一行。此外，布局需要响应式，根据页面大小使用不同的列数。如果所有照片都是风景，那么这不是问题。我目前这样做如下：
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
有没有办法做到这一点？我到处搜索并绞尽脑汁，但如果不事先了解所需的列/行数和肖像图像在顺序中的位置，我想不出办法来做到这一点。任何指针将不胜感激。
【问题讨论】：
标签： php html css image-gallery