columns- 유체 디자인 된 div를 표시하는 방법

<div id="foo"> 
    <div class="bar"> 
     there are very many divs like this 
    </div> 
</div>

사업부의 #foo는 800 픽셀에서 포함 된 미디어의 100 %와 사업부의 .bar 인 변수를 가질 수있는 가변 폭을 가질 수columns- 유체 디자인 된 div를 표시하는 방법

#foo{ 
    margin: 10px auto; 
    min-height: 400px; 
    min-width: 800px; 
} 
.bar{ 
    float: left; 
    text-align: left; 
    width: 450px; 
    min-height: 280px; 
}

CSS 신장. 와이드 디스플레이에서는 3 열의 .bar div가 필요하지만 가변 높이이므로 위 div의 왼쪽으로 슬라이드하는 것처럼 왼쪽에있는 div는 왼쪽 위의 공백을 갖습니다. 어떻게 그들을 위쪽으로 부양시킬 수 있습니까? 나는 이치에 맞기를 바란다.

출처

2013-07-08 qualebs

당신은 대표자가 무엇처럼 뭔가를 찾고 계십니까? 다음과 같은 것 : http://cssdeck.com/labs/css-only-pinterest-style-columns-layout – hungerstar

네, 페이스 북도 와이드 패널 디스플레이에서 그렇게했습니다. 내가하고 싶은 것은 그들이 왼쪽으로 떠있을 때 div 위의 공간을 제거하는 것입니다. – qualebs

이 게시물을 보시길 바랍니다 : Does anyone know how Pinterest.com's layout works? 그리고 아마도 이러한 jQuery 플러그인 : http://masonry.desandro.com/ 및 http://www.wookmark.com/jquery-plugin.

CSS3 솔루션 : http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

출처

2013-07-08 18:33:43 hungerstar

또한 [this] (http://benholland.me/javascript/how-to-build-a-site-that-works- like-pinterest /) 및 대문자 [this] (http://www.script-tutorials.com/?s=pinterest+step) –

columns- 유체 디자인 된 div를 표시하는 방법

답변

관련 문제