1

私の質問は仮説です。まだ作業するコードを作成していません。

jQuery Masonryを使用して配置された中央のグリッドを持つWebページがあります。私の問題は美学の 1 つです。メーソンリーは意図的にグリッドを中央に配置するため、グリッドは多くの場合、親コンテナーよりも大幅に薄くなり、ヘッダーとフッターの要素とうまく整列しません。同様に、グリッドがヘッダーの幅を超えて拡大できる場合もありますが、これは見た目がさらに悪くなります。

スクリプトを使用して流動列のサイズを変更することを検討しましたが、グリッドには画像が含まれており、結果は良くありませんでした。私が今考えているのは、石積みコンテナの幅をいつでも検出して取得できる小さなスクリプトがあるかもしれない#grid(幅はもちろん動的であり、インラインで表示される) <div id="grid" class="masonry" style="height: 408px; position: relative; width: 1368px;">、この同じ幅を に適用する#headerなどです。#footer、およびグリッド幅に従って全体を整列させるために必要なものは何でも。

助言がありますか？前もって感謝します

4

2 に答える 2

3

もちろん

var current_width = $("#grid").width();
$("#footer, #header").width(current_width);

また

$("#footer, #header").width($("#grid").width());

ページのサイズが変更されたら (ページがズームされた場合にも発生しますか?)、次のようなコードを実行します。

$(document).ready(function() {
    $(window).resize(function() {
        $("#footer, #header").width($("#grid").width());
    });
});
于 2012-09-07T12:49:00.607 に答える
0

これを行うこともできます:この fiddleのように #container にヘッダーを配置するだけで、青いボックスが中央に配置され、必要に応じてサイズが変更されます。多分それはあなたが求めているものです。

于 2012-09-07T13:54:20.990 に答える