행렬을 모체 너비에 동적으로 맞추는 방법 (예 : JS)

이 예제 (http://jsfiddle.net/cpSbH/2/)를보고 창 크기를 조정하여 의미를 확인하십시오. 한 행에 많은 항목을 얻으려면 여백을 조정합니다. 가능하면 공간을 충분히 활용하고 한쪽면의 간격을 피하십시오.행렬을 모체 너비에 동적으로 맞추는 방법 (예 : JS)

자바 스크립트없이 이것을 구현할 수 있습니까?

감사

내가 쓴 코드 :

HTML :

<div id="wrapper"> 
<div class="item">item</div> 
... 
<div class="item">item</div> 
</div>

JS : 인 flexbox 모델을 사용

$(window).resize(function(){ 
    var minMargin = 10; 
    var width = $("#wrapper").innerWidth(); 
    var itemWidth = $('.item').outerWidth()+minMargin+minMargin 

    var count = Math.floor(width/itemWidth) 
    var space = width - (count*itemWidth); 
    var margin = (space/(count)); 

    if(margin < minMargin) margin = minMargin; 

    margin = Math.floor(margin/2); 
    $('.item').css({'margin-left':margin,'margin-right':margin}); 
});

출처

2013-03-30 Zopper

가능한 모든 수의 열에 대해 1 개의 미디어 쿼리를 만든 다음 백분율로 배포해야합니다. 예를 들어 3 열을 허용하는 최소 및 최대 폭을 계산하고 너비를 33 %로 설정합니다. 4에 대한 최소 너비와 최대 너비를 계산하고 너비를 25 %로 설정하는 식입니다. – vals

감사! 필자의 경우 미디어 쿼리를 사용할 수 없지만 (행렬 래퍼 크기가 창 크기보다 더 많은 것에 따라 너무 복잡하기 때문에) 래퍼의 너비를 측정하기 위해 미디어 쿼리 로직을 시뮬레이션 할 수 있습니다. 수정 된 예제 : http://jsfiddle.net/cpSbH/6/ (솔루션을 찾을 사람에 대한 의견이 있음). 이상적 (여전히 js)은 아니지만 이전보다 훨씬 좋습니다. – Zopper

당신은 CSS를 사용하여 원하는 동작을 얻을 수 있습니다. 가장 큰 문제는 브라우저 호환성입니다.
귀하의 CSS는 다음과 같이 보일 수 있습니다 :

#wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; /*or space-between*/ 
} 
.item { 
    flex: 1; 
}

this answer에서 당신은 플렉스 모델에 대한 자세한 내용은 몇 가지 링크가 있습니다.

출처

2013-05-09 17:17:25 olanod

행렬을 모체 너비에 동적으로 맞추는 방법 (예 : JS)

답변

관련 문제