유체 너비의 컨테이너를 껴안으십시오

Question

컨테이너 (이미지 갤러리)의 최대 너비는 80 %입니다. 안쪽에는 이미지가 왼쪽으로 떠서 열과 행이 형성됩니다. 브라우저 창을 축소/확장하면 각 행에 더 많은 또는 더 적은 수의 이미지가 들어가고 일반적으로 다른 행간 이미지를 맞추기에 충분한 공간이 없을 때 각 행 끝에 "나머지"가 있습니다.

http://jsfiddle.net/vladmalik/DRLXE/1/

컨테이너를 확장하거나 계약하여 정확히 포옹 할 수는 있지만 많은 수레가 열에 들어갈 수 있기를 원합니다 (따라서 오른쪽에는 노란색 나머지가 없습니다). 이것이 CSS로 할 수 있습니까?

HTML :

이

<section> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</section> 

CSS :

div { 
    width: 100px; 
    height: 100px; 
    float:left; 
    background: red; 
} 

section { 
    margin: 0 auto; 
    max-width: 80%; 
    background:yellow; 
    overflow: hidden; 
} 

Answer 1

jQuery .length()이 div 인 경우, 창 크기에 따라 필요한 너비와 높이를 지속적으로 다시 계산할 수 있다고 생각합니다. 그런 다음

div { 
    width: 100px; 
    height: 100px; 
    float: left; 
} 

...

$(document).ready(function(){ 
    changeSize(); 
}); 

function changeSize(){ 
    var length = $('div').length(); //let's say is 12 

    var windowwidth = $(window).width(); //let's say it's 1000px, 

    if (length >= 10 && windowwidth >= 600px){ 
     $('section').css('width', '300px'); 
     $('section').css('min-height', '400px'); 
    } 
    else if { 
     //Some more sizing code... 
    } 
} 

$(window).resize(function() { 
    changeSize(); 
}); 

... 그래서 만약 당신은 당신의 필요에 따라 경우 문에서 조건을 설정해야하지만,이 방법은 그것을해야한다.

Answer 2

그것은 (는 크로스 브라우저있는 Compatibile 수있다 특히) CSS에서 순수 할 수없는, 당신이 할 수있는 최선입니다 이 같은 자신의 CSS를 배경 %의 폭 된 div를 설정 한 후 설정 :

div { 
    width:25%; 
    height: 100px; 
    float:left; 
    background: transparent url('http://1.bp.blogspot.com/_muMRp22Klwo/SuGeqr4TeII/AAAAAAAAAVY/afpIYqkyPkM/s400/sad-dog.jpg') center center no-repeat; 
} 

http://jsfiddle.net/DRLXE/3/

아직까지는 완벽하지 않습니다.