DIV 컨테이너에 컨테이너의 실제 크기를 기반으로 요소를 채우는 방법은 무엇입니까?

Question

페이지의 어딘가에 최소 너비 및 최소 높이가 설정된 DIV 컨테이너가 있습니다.

콜백 및 자바 스크립트를 사용하여 작은 패널 (디스플레이 : 인라인 블록이있는 DIV)을로드하고 있습니다.

지금은 패널 수가 고정되어있어 사용자가 브라우저 창을 최대화하면 컨테이너의 크기가 커지고 마지막 줄 끝에 공백이 표시됩니다.

나는 컨테이너의 크기 변경을 파악하고 컨테이너의 새로운 공간에 잘리지 않는 많은 요소를로드하려고한다.

나는 amazon.com에서 이것을 보았습니다. 그들은 4 개의 제품을 표시하는 패널을 가지고 있지만, 브라우저 창이 최대화되면 동일한 패널에 컨테이너의 사용 가능한 모든 공간을 채우는 더 많은 제품이 표시됩니다.

스크롤 막대가 나타나서는 안되며 요소를 자르지 않아야합니다.

사용할 수있는 스크립트 또는 샘플 코드가 있습니까?

문제에 아주 좋은 솔루션을 발견 안드레이

Answer 1

을 주셔서 감사합니다. (여기 슈퍼마켓에서와 같은 의미로 사용되는 용어는 '디스플레이') :

function updateDisplay() { 
    $(".s2", this).hide(); 
    var x = $(".s2", this); 

    var prevPos = -1; 
    var nrows = 2; 
    for (var i = 0; i < x.length; i++) { 
     $(x[i]).toggle(); 
     var curPos = $(x[i]).position().left; 
     if (curPos < prevPos) { 
      if (--nrows == 0) { 
       $(x[i]).toggle(); 
       break; 
      } 
     } 
     prevPos = curPos; 
    } 
} 

function updateDisplays() { 
    $(".dcon").each(updateDisplay); 
} 

$(window).resize(updateDisplays); 
$(document).ready(updateDisplays); 

당신은 다음 페이지에 대한 조치에서 볼 수 있습니다

www.megabit-mich.ru

여기에 코드입니다 www.sportolimpia.ru