在两个现有元素之间放置和拟合n个元素

时间:2012-10-08 23:04:54

标签: javascript jquery html5 css3 positioning

有两个固定宽度的元素(%)。

第一个元素位于left: 0,第二个元素位于right: 0;

需要在这两个元素之间附加N个元素,因此每个新附加元素具有相同的宽度(取决于主元素之间的可用空间)。

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

问题在于新元素的定位不准确(彼此交叉或在它们之间留下一些额外的空间)并且不一致地使用不同浏览器的窗口大小。

请帮忙。

我了解不同的浏览器会提供不同的输出,但此脚本仅限于Google Chrome使用。

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

不久前我有类似的要求。在没有质疑或改变您的策略/代码的情况下,这里有一个小小的显示尽可能接近我: http://jsfiddle.net/hXUyh/3/ (请注意,我没有提供调整大小,因为您的原始代码没有)

width()jquery函数将循环的问题。所以你的数学总是有点偏差。我通过在window.innerWidth上使用计算来改进这一点,由于浮点宽度,它会有点不对齐。使用浮点宽度进行像素完美对齐不是最佳选择。

如果想要完美对齐,请使用填充。以下是使用最小填充的示例:http://jsfiddle.net/hXUyh/8/ 如果你不需要边框,数学会更容易。