6

max-width：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;  
}
4

2 に答える 2

0

ウィンドウサイズに基づいて必要な幅と高さを常に再計算する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ステートメントで条件を設定する必要がありますが、このメソッドで設定できます。

于 2013-02-01T16:58:09.133 に答える
0

純粋にCSSで行うことはできません（特にクロスブラウザー互換である必要がある場合）。できる最善の方法は、divの幅をパーセントで設定してから、次のようにcssの背景を設定することです。

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/

しかし、まだ完璧にはほど遠い。

于 2013-02-01T15:20:23.623 に答える