流体の幅の容器から浮かべる浮き彫り

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(); 
}); 

...ので、もしあなたが、あなたのニーズに基づいて、if文で条件を設定する必要がありますが、この方法は、それを行う必要があります。

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/

まだまだ完璧ですが。