2017-03-16 5 views
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> 

나는 아래 그림 한 문제를 사용하고있는 코드입니다. enter image description here

이미지 5는 이미지 5 아래에 표시되어야하며 이미지 8은 이미지 7이 현재 표시되어야합니다.

내가 뭘 잘못하고 있니? CSS 만 있으면됩니다. JS

column-count를 사용하면 다음과 같은 순서로 이미지가 표시됩니다. 1, 3, 5, 8, 2, 4, 6 순으로 이미지가 표시됩니다. 7이 아니라 1, 2, 3 ....

감사

답변

0

:after에 있지만 요소 스스로가에 수레를 취소하지 마십시오.

.test:nth-of-type(2n+1) { 
    clear: left; 
} 
+0

차이가 없습니다 :( – user2206329

+0

가 있습니까 유 있는지 내가 만든 테스트 케이스 : http://codepen.io/skeurentjes/pen/wJPavv?editors=1100#0 – SKeurentjes

+0

있도록 근무했지만 문제는 블록 4와 6 사이의 여백을 볼 수 있습니까? 나는 6을 위로 움직이게하고 싶습니다 ... 바로 아래 4 .. 간격이 너무 큽니다 – user2206329