部分可扩展站点答案

【问题标题】：Scalable site in parts部分可扩展站点
【发布时间】：2011-08-22 10:58:28
【问题描述】：

我正在尝试制作一个可扩展的网站，在这个示例中说明了基本逻辑：

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

每当您调整浏览器窗口大小时，中间紫色框的数量都会发生变化。

但是有没有办法让顶部的绿色“徽标”框跟随这些框的宽度，如图所示：http://imageshack.us/photo/my-images/198/testimg.jpg/

因此，如果第一行有 7 个可见的紫色框，则绿色框的宽度应与这些相同 - 如果第一行有 10 个可见，则为 10 个框的宽度

是否有可能做到这一点，也许使用 jquery？我知道我可以在绿色框上使用“width:100&”，但这不符合紫色框的确切宽度：/

【问题讨论】：

标签： jquery css resize width scalable

【解决方案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

【讨论】：