Масштабируемый сайт по частям

Question

Я пытаюсь создать масштабируемый сайт, в котором на этом примере проиллюстрирована основная логика:

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

Количество фиолетовых прямоугольников в середине изменяется всякий раз, когда вы изменяете размер своегоОкно браузера.

Но есть ли способ сделать зеленый прямоугольник с логотипом в верхней части, следуя ширине этих полей, как показано на этом рисунке: http://imageshack.us/photo/my-images/198/testimg.jpg/

Так что, если есть7 видимых фиолетовых коробок в первом ряду, зеленая коробка должна иметь ту же ширину, что и эти - и ширину 10 коробок, если в первом ряду 10 видимых

Возможно ли это сделать, возможно, используяJQuery?Я знаю, что могу использовать «width: 100 &» на зеленом поле, но это не соответствует точной ширине фиолетовых полей: /

Answer 1

Вот скрипт, который должен делать то, что вы хотите:

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

jSВ примере здесь