可擴展的網站在部分

Question

我試圖讓其中的基本邏輯是在這個例子說明一個可擴展的網站：

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

的紫色箱子中間的變化量，只要你調整您的瀏覽器窗口。

但有使在頂部的綠色「標誌」框遵循這些框的寬度像這張圖片上所示的方式：http://imageshack.us/photo/my-images/198/testimg.jpg/

所以，如果有在第一行7個可見的紫色箱子，綠色框應該有相同的寬度作爲 - 和10個盒子的寬度，如果有10個可見的第一行

是否有可能這樣做，也許使用jQuery？我知道我可以使用「寬度：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(); 
    } 
}); 

jsBin example here