서로 다른 높이의 div를 정렬하는 방법은 무엇입니까?

내 피들 here을 볼 수 있습니다. 그들은 그들 사이에 공백이 있지만, 나는 그것들이 서로 위에 있기를 원합니다. jQuery로 어떻게이 작업을 수행 할 수 있습니까? 벽돌을 사용해 보았지만이 코드는 도움이되지 않았습니다.서로 다른 높이의 div를 정렬하는 방법은 무엇입니까?

(function(){ 
var $container = $('.rss'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.item', 
    columnWidth : 210 
    }); 
}); 
})();

편집 : 아무도 피들 작업을 할 수 있습니까?

출처

2013-01-09 user1961106

만약 내가 너라면 Masonry를 사용할 것이지만 div의 다른 크기를 계산할 수있는 함수를 만들 필요가 없다면, 절대 위치를 지정하고 놓을 공간이 어디에 있는지 계산할 필요가 없다. 그들 – Chanckjh

글쎄, 내가 사용했던 기능이 작동하지 않았고 무엇이 도움이 될지 모른다. 도울 수 있니? – user1961106

보십시오이

$(function(){ 

$('#container').masonry({ 
    itemSelector: '.box', 
    isAnimated: true 
});

}); 부모 컨테이너를 분할

http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

그것은 CSS3 열 카운트를 속성을 사용하여, 설정을 의미합니다 : 당신은 벽돌에 CSS의 대안을 원하는처럼

DEMO

출처

2013-01-09 11:26:48 Sowmya

최대 너비를 사용하고 있는데 어떤 이유로 컨테이너가 작게 설정되지 않고 실제로 작아집니다 ... – user1961106

는 소리 너비 : 100 %; 하위 컨테이너로 전달하면 부모 너비의 1/3이됩니다.

예를 들어, CSS :

.container { 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    column-count: 3; 
    column-gap: 10px; 
    width: 900px 
} 
.container div { 
    display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */ 
    margin-bottom: 20px; 
    width: 100%; 
}

가 목록으로 설정 한이에 대한 데모 : http://jsfiddle.net/SHZ2G/2/

여기 http://sickdesigner.com/demo/css-masonry/css-masonry.html

이 예를 기반으로 바이올린입니다 참고로 위의 기사에서 설명한 것처럼 IE 호환성을 위해 여전히 벽돌을 사용할 수 있습니다

출처

2013-01-09 11:34:08 reekogi

심지어 FF 또는 Chrome에서 데모가 작동하지 않습니다 : X – user1961106

죄송합니다. jsfiddle 링크가 업데이트되었습니다. > http://jsfiddle.net/SHZ2G/2/ – reekogi

서로 다른 높이의 div를 정렬하는 방법은 무엇입니까?

답변

관련 문제