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
이렇게 할 방법이 있습니까? 나는 모든 곳에서 수색을하고 내 두뇌를 쌓았지만 필요한 열/행 수 및 순서에 따른 세로 이미지의 위치에 대한 사전 지식없이이를 수행 할 수있는 방법을 생각할 수 없습니다. 모든 포인터 크게 감사하겠습니다.