2

有两个固定宽度的元素（以 % 为单位）。

第一个元素定位left: 0，第二个元素定位right: 0；

需要在这两个元素之间附加一些 N 个元素，因此每个新附加的元素都具有相同的宽度（取决于主要元素之间的可用空间）。

http://jsfiddle.net/hXUyh/1/

问题是新元素的定位不准确（相互交叉或在它们之间留下一些额外的空间）并且与不同浏览器的窗口大小不一致。

请帮忙。

我知道不同的浏览器会给出不同的输出，但这个脚本将仅限于谷歌浏览器使用。

4

2 回答 2

1

尝试这个：

$(document).ready(function() {
    for (var i = 0; i < 9; i++) {
        $('<div/>').appendTo('body')
    }
    $(window).resize(function() {
        var firstWidth = $('#element-0').width();
        var r = ($(window).width() - (firstWidth * 2) - 2) / 9;
        $('div').slice(2, 11).each(function(i) {
            $(this).css({
                left: i == 0 ? firstWidth : firstWidth + r * (i),
                width: r
            })
        })
    }).resize() 
});​

http://jsfiddle.net/yav9Q/

于 2012-10-08T23:57:32.063 回答
0

不久前我也有类似的要求。在不质疑或更改您的策略/代码的情况下，这是一个尽可能接近的小提琴：http: //jsfiddle.net/hXUyh/3/ （请注意，我没有满足您的原始代码的大小调整没有' t)

width() jquery 函数会舍入的问题。所以你的数学总是会有点偏离。我通过在 window.innerWidth 上使用计算来改进这一点，由于浮点宽度，它会有点错位。使用浮点宽度进行像素完美对齐不是要走的路。

如果您想要完美对齐，请使用填充。这是一个使用尽可能小的填充的示例：http: //jsfiddle.net/hXUyh/8/ 如果您不需要边框，数学会容易得多。

于 2012-10-08T23:58:25.477 回答