사용하지 않는 공간을 채우기위한 부동 DIV 's

Question

특정 API로 작업 할 때 기본적으로 수십 개의 설정 범주를 제공하는 함수를 사용하고 있습니다. 이를 표시하기 위해 컨테이너 DIV를 선택하고 분석 된 각 그룹이 다음에 나타나는 그룹 (4x 25 % 너비 테이블)별로 설정을 분할했습니다.

이 설정은 다양한 양의 설정으로 인해 제대로 작동하므로 많은 사용되지 않은 공간이 남아 있습니다. 이것은 내가 남긴 모든 것을 떠 다니는 것으로 인해 발생하지만, 가장 긴 테이블은 다음 테이블을 훨씬 더 아래쪽에 표시합니다.

CSS는 이러한 테이블을 사용되지 않은 공간에 띄우는 것을 허용합니까? 나는 강조를 위해 스크린 샷에서 가장 큰 테이블을 강조했다.

Answer 1

체크 아웃이 좋은 현재의 프로젝트를 위해 그것을 사용 http://masonry.desandro.com/

임. 현재 Bootstrap 및 플로팅 요소에 드롭 다운 내에서 몇 가지 문제가 있습니다. 아무것도하지 않으면 플러그인이 삭제됩니다.

Answer 2

이 JS 방법을 시도해보십시오

<script> 
function renderGrid() { 
    var blocks = document.getElementById("container").children; 
    var pad = 10, 
     cols = 4, //Change this to as much as you want but in this It's 4 
     newleft, newtop; 
    for (var i = 1; i < blocks.length; i++) { 
     if (i % cols == 0) { 
      newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad; 
      blocks[i].style.top = newtop + "px"; 
     } else { 
      if (blocks[i - cols]) { 
       newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad; 
       blocks[i].style.top = newtop + "px"; 
      } 
      newleft = (blocks[i - 1].offsetLeft + blocks[i - 1].offsetWidth) + pad; 
      blocks[i].style.left = newleft + "px"; 
     } 
    } 
} 
window.addEventListener("load", renderGrid, false); 
window.addEventListener("resize", renderGrid, false); 
</script> 

그리고 이제 HTML 부분 :

<div id="container"> 
    <div><p>Your content here!</p></div> 
</div> 

을 그리고 그것은 관하여하지만 당신은 또한 내부이 CSS 스타일을 추가하는 대신 class="container"의 id="container"이 있는지 확인 귀하의 CSS 파일 :

#container > div { 
position: absolute; 
float: left; 
width: 25%; 
} 

결과 : 자동 정렬 당신의 div 자동 상단 및 왼쪽 요소 스타일과 함께.

희망 작품입니다. -Arqetech