1

この例で基本的なロジックが示されているスケーラブルなサイトを作成しようとしています:

http://pastehtml.com/view/1eg2pr1.html

ブラウザー ウィンドウのサイズを変更するたびに、中央の紫色のボックスの数が変化します。

しかし、この写真に示されているように、上部の緑色の「ロゴ」ボックスをこれらのボックスの幅に合わせる方法はありますか? http://imageshack.us/photo/my-images/198/testimg.jpg/

したがって、最初の行に 7 つの紫のボックスが表示されている場合、緑のボックスはこれらと同じ幅である必要があります。最初の行に 10 個のボックスが表示されている場合は、10 個のボックスの幅になります。

おそらくjqueryを使用して、それを行うことは可能ですか? 緑のボックスで「width:100&」を使用できることはわかっていますが、それは紫のボックスの正確な幅には従いません:/

4

1 に答える 1

0

これがあなたが望むことをするべきスクリプトです：

function adaptTitleWidth() {
    // reset default style
    $(".box").css("background","purple");
    // get the first row of boxes (the first box and the boxes having the same offset().top
    firstRowBoxes = $(".box").filter(function() {
        return $(this).offset().top === $(".box:first").offset().top;
        // changes the first row of boxes background to blue
    }).css("background","blue");
    // changing .logo.width() : number of boxes on the first row * outer width of the boxes, margin included - the last margin-right
    $(".logo").width(firstRowBoxes.length * $(".box:first").outerWidth(true) - parseInt($(".box:first").css("margin-right")));
}

$(function() {
    adaptTitleWidth();
    window.onresize = function(event) {
        adaptTitleWidth();
    }
});


jsBinの例はこちら

于 2011-05-10T13:12:13.340 に答える