1

次のリンクに示されている簡単なページがあります。これは、ブラウザ ウィンドウのサイズを変更すると拡大できます: http://pastehtml.com/view/1eg346q.html

現在動作しているように、左にフロートし、列に別のボックスのスペースがあると、写真が動き回ります。

問題は、ブラウザウィンドウを大きくしようとすると、最終的に新しいボックス用のスペースができるまで多くの空白ができることです - 次のように: http://imageshack.us/photo/my-images/220/scal1 .jpg/

サイズを変更するときに両方のサイトの余白を広げる方法はありますか?つまり、左に 50%、右に 50% のようになりますか? おそらくこのように: http://imageshack.us/photo/my-images/641/scal2.jpg/

私が考えることができる唯一の方法は、ボックスを中央に配置することですが、サイズを変更するときだけ、常に中央に配置したくありません...

これを行う方法がない場合、私が現在行っているようにスケーリングするためのより良い提案があり、同時に白いスペースを取り除く方法はありますか?

4

3 に答える 3

1

最も簡単な方法は、ボックス クラスを変更して、floatすべてdisplay: inline-blockの要素をコンテナにラップしtext-align: center;、margin: 0 auto;

フィドル: http://jsfiddle.net/4UDxE/

于 2011-05-10T13:51:19.380 に答える
0

純粋なCSSではそれが可能だとは思いません。

ボックスを div で囲み ( andmargin:0 autoをoverflow:auto使用)、jQuery を使用してこれを行うことができます

$( function(){
    var $container = $('#container');
    var $cparent = $container.parent();
    var boxsize = $('.box:first').outerWidth( true );

    $(window).resize(function(){
        var fitwidth = $cparent.width();
        var howMany = Math.floor( fitwidth / boxsize );
        $container.width( howMany * boxsize );
    }).resize();
});

デモ http://jsfiddle.net/gaby/8BcQX/デモでは、より正確なセンタリングのため
に、マージンを左右に変更し.boxまし10pxた10px

コメントの更新

内側にサイドバーがあります: http://jsfiddle.net/gaby/8BcQX/1/ (必要に応じてサイズを調整し、ボックスを並べる必要があります)

グリッドの外側にサイドバーがある場合: http://jsfiddle.net/gaby/8BcQX/2/ (コンテナーへの兄弟のサイズに対応するための jquery への小さな変更)

于 2011-05-10T14:30:06.457 に答える
0

おそらく onResize イベントを使用して、イベントが終了したら配置を中央に設定し、デフォルトに戻すことができますか?

$(window).bind('resize', function(){
  // do stuff!
});
于 2011-05-10T13:32:11.807 に答える