서로 연결되는 이미지 격자 만들기

Question

나는 서로 잘 연결되는 이미지 격자를 만들려고합니다. 이 문제 그래서 http://www.yannickluijten.be/test2

아니 모든 이미지가 같은 높이가 있습니다 : 나는 (회색) 4 이미지가 첫 번째 이미지 아래에 표시 할 (녹색) 내가 돈 '여기

내 그리드입니다 3 열로 작업하고 싶지 않습니다. 어떻게해야합니까?

.img1 { 
    width: 300px; 
    height: 200px; 
    float: left; 
    background: green; 
} 

.img2 { 
    width: 300px; 
    height: 400px; 
    float: left; 
    background: blue; 
} 

.img3 { 
    width: 300px; 
    height: 300px; 
    float: left; 
    background: yellow; 
} 

.img4 { 
    width: 300px; 
    height: 400px; 
    float: left; 
    background: gray; 
} 

Answer 1

CSS 부동 소수점의 경우, 부동 소수점 부동 요소가 왼쪽 가장자리로 "둘러싸 야"할 때 그 중 일부 사이에 원하지 않는 수직 간격이 나타나지 않도록 제어 할 수있는 방법이 없습니다.

jQuery Masonry과 같은 모자이크 플러그인은 이러한 종류의 문제를 해결합니다. 어떤 열에 어떤 사진이 나타나는지 제어 할 수 있는지는 확실하지 않지만 제대로 작동하는지는 알 수 없습니다.

CSS columns을 사용할 수 있지만 어떤 열에 어떤 사진을 표시할지 제한적으로 제어 할 수 있으며 IE9 이하에서는 작동하지 않습니다.

Answer 2

.img4 { 
width: 300px; 
height: 400px; 
float: left; 
background: gray; 
clear: both; 
} 

네 번째 이미지는하지만 정확하게 첫 번째 이미지에서 첫 번째 행에 온다.