Site évolutif dans les parties

Question

Je suis en train de faire un site évolutif où la logique de base est illustrée sur cet exemple:

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

La quantité de boîtes pourpres dans les changements du milieu lorsque vous redimensionnez la fenêtre de votre navigateur .

Mais est-il un moyen de faire la boîte « logo » vert dans la partie supérieure suivent la largeur de ces boîtes comme illustré sur cette image: http://imageshack.us/photo/my-images/198/testimg.jpg/

Donc, s'il y a 7 cases violettes visibles dans la première rangée, la boîte verte devrait avoir la même largeur que theese - et la largeur de 10 cases s'il y en a 10 visibles dans la première rangée

Est-il possible de faire cela, peut-être en utilisant jquery? Je sais que je peux utiliser « width: 100 & » sur la boîte verte, mais qui ne marche pas suivre la largeur exacte des boîtes violet alors:/

Answer 1

Voici un script qui devrait faire ce que vous voulez:

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