有两个固定宽度的元素(%)。
第一个元素位于left: 0
,第二个元素位于right: 0
;
需要在这两个元素之间附加N个元素,因此每个新附加元素具有相同的宽度(取决于主元素之间的可用空间)。
问题在于新元素的定位不准确(彼此交叉或在它们之间留下一些额外的空间)并且不一致地使用不同浏览器的窗口大小。
请帮忙。
我了解不同的浏览器会提供不同的输出,但此脚本仅限于Google Chrome使用。
答案 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()
});
答案 1 :(得分:0)
不久前我有类似的要求。在没有质疑或改变您的策略/代码的情况下,这里有一个小小的显示尽可能接近我: http://jsfiddle.net/hXUyh/3/ (请注意,我没有提供调整大小,因为您的原始代码没有)
width()jquery函数将循环的问题。所以你的数学总是有点偏差。我通过在window.innerWidth上使用计算来改进这一点,由于浮点宽度,它会有点不对齐。使用浮点宽度进行像素完美对齐不是最佳选择。
如果想要完美对齐,请使用填充。以下是使用最小填充的示例:http://jsfiddle.net/hXUyh/8/ 如果你不需要边框,数学会更容易。