HTML : <a href="http://mythoughtswouldscareyou.tumblr.com/" rel="nofollow">http://mythoughtswouldscareyou.tumblr.com/</a></p> <p>내가 기본적으로이 일반적인 레이아웃을 복제 할 : 열

Question

나는이 작업을 예와 유사한 HTML/CSS 레이아웃을 생성 할 수있는 방법

의 이미지. 나는 을 float: left; 속성과 함께 사용해 보았습니다.하지만이 방법은 아닙니다.

이 작업을 수행하는 효율적인 방법에 대한 기본적인 개요/설명을 통해 많은 도움이 될 것입니다.

Answer 1

아,이 도구가 있습니다 :

http://masonry.desandro.com/index.html

벽돌 jQuery를위한 동적 그리드 레이아웃 플러그인입니다. CSS 플로트의 플립 사이드 이라고 생각하십시오. 플로팅은 가로로, 그 다음에 세로로 요소를 배열하는 반면, Masonry는 요소를 세로로 배열하고, 은 그리드의 다음 열린 지점에 각 요소를 배치합니다. 결과적으로 은 다양한 높이의 요소 사이의 수직 간격을 최소화합니다. 벽에 석조가 적합합니다.

Answer 2

웹 사이트에 jQuery.masonry이 사용되었습니다. 다양한 높이의 이미지와 많은 수의 float: left 요소를 사용하면 대개 서로 잘 정렬되지 않는 블록으로 끝납니다. 이 플러그인은 이러한 요소를 지능적으로 정렬하여 사용 가능한 공간을 최대한 활용하고 최대한 많은 틈을 제거합니다.