0
다음과 같은 문제가 있습니다. 두 개의 열에 이미지 갤러리를 표시하고 싶습니다. 이미지의 높이가 다릅니다. 나는 열 개수와 함께 석공 술 방법을 사용해 보았습니다. 그 위대한 작동하지만 문제는 사이트 크기가 조정되면 즉시 응답해야하기 때문에 그것은 1 열에 everthing 보여줍니다 ..하지만 이미지는 행보다는 열을 사용하여 같은 순서로되지 않습니다 ...서로 옆에 이미지를 표시하는 방법 n 높이가 다른 두 개의 열
그래서 이것은 내가
.left {
float: left;
width: 45%;
margin: 1px;
}
.right {
float: right;
width: 45%;
}
.test{
margin-bottom: 10px;
}
.test:after {
clear: left;
}
img {
max-width: 100%;
height: auto;
}
<div class="container">
<div class="left">
<img src="1.jpg" alt="">
</div>
<div class="left test">
<img src="2.jpg" alt="">
</div>
<div class="left">
<img src="3.jpg" alt="">
</div>
<div class="left test">
<img src="4.jpg" alt="">
</div>
<div class="left">
<img src="5.jpg" alt="">
</div>
<div class="left test">
<img src="6.jpg" alt="">
</div>
<div class="left">
<img src="7.jpg" alt="">
</div>
<div class="left test">
<img src="8.jpg" alt="">
</div>
</div>
이미지 5는 이미지 5 아래에 표시되어야하며 이미지 8은 이미지 7이 현재 표시되어야합니다.
내가 뭘 잘못하고 있니? CSS 만 있으면됩니다. JS
column-count를 사용하면 다음과 같은 순서로 이미지가 표시됩니다. 1, 3, 5, 8, 2, 4, 6 순으로 이미지가 표시됩니다. 7이 아니라 1, 2, 3 ....
감사
차이가 없습니다 :( – user2206329
가 있습니까 유 있는지 내가 만든 테스트 케이스 : http://codepen.io/skeurentjes/pen/wJPavv?editors=1100#0 – SKeurentjes
있도록 근무했지만 문제는 블록 4와 6 사이의 여백을 볼 수 있습니까? 나는 6을 위로 움직이게하고 싶습니다 ... 바로 아래 4 .. 간격이 너무 큽니다 – user2206329