플로트 된 DIV를 2로 나누면 행이 아래로 내려갑니다.

Question

예를 들어 DIV가 래퍼이고, 예를 들어 DIV의 폭이 600px라고 말합니다.

이 div 안에는 일련의 콘텐츠 DIV가 떠있었습니다. 크기는 200px 또는 400px이며 모두 높이가 같습니다. 나는 400 픽셀 한 다음,이 200 픽셀 사람이 있다면

세 200 픽셀 와이드 된 DIV는 물론, 등 또한 200 픽셀 한 다음에 400 픽셀 하나 하나,

을 완벽하게 하나 하나 개의 라인을 정렬 것, 후자는 것 아래 행에 드롭 다운하여 위 행의 끝에 200px 너비의 공간을 남겨 둡니다.

이제 DIV의 내용이 텍스트라고 가정하면 DIV가 폭이 + 현재 행의 남은 공간이 부족하기 때문에 DIV가 다음 행으로 떨어지는 것을 감지하는 방법이있을 것입니다. 이 400px div를 두 개의 200px div로 나눕니다. 첫 번째 부분을 첫 번째 부분을 두 번째 줄의 첫 번째 200px DIV와 나머지 두 번째 부분을 첫 번째 200px DIV의 두 번째 줄로 남겨두고 내용을 분할합니다.

jquery가 사이트에서 사용되므로 jquery를 사용하는 솔루션을 찾으면 쉽게 사용할 수 있습니다. 나는 columnize 플러그인을 가지고 놀려고했지만이 방법을 찾지 못했습니다. 나는 꽤 많은 JS 초보자입니다.

도움/의견을 보내 주시면 감사하겠습니다.

Answer 1

서투른 작은하지만 어쩌면 그것은 당신의 sollution 발견하는 데 도움이 :

var pos = 0; 
$('.container div').each(
    function() 
    { 
     pos += $(this).width(); 
     if(pos > 600) 
     { 
      var div1 = $(this).children(".subdiv1"); 
      var div2 = $(this).children(".subdiv2"); 
      $(this).after(div1); 
      $(this).after(div2); 
      $(this).remove();   
     } 
     if(pos >= 600) 
      pos = 0; 
    } 
); 

Answer 2

jQuery를 사용하면 div의 CSS 계산 된 높이를 찾을 수 있으며, 한 줄에서 예상 한 것보다 큰 경우 그것이 내려간 것을 의미합니다.

if ($("#id").height > default) // default will be an integer 
{ 
    ... steps to make it two divs instead 
}