2011-09-21 84 views
2

假设我有一堆左边的div,像一个时尚网格。这些在一个固定宽度的容器中。第一排浮动元素的宽度?

现在我想知道第一排的宽度!以便我可以将该宽度与固定宽度进行比较,并查看是否有大量空白,我想通过将容器宽度设置为第一行元素的宽度来最小化。

现在,难度是,当我浮动的元素没有第一或第二行的概念..嗯,我真的不需要知道第一行宽度persé,我只需要知道nr白色的,空的空间像素旁边的最后一个元素到容器的右侧..

见这个例子:http://i54.tinypic.com/256wdjn.png(不介意浮华的色彩,只是为了测试)

权一边有太多的白色空间..我不能只是预先计算这个边缘,边缘宽度,图像宽度等都是动态的..

谢谢!

回答

3

大体上,你可以做的是循环嵌套元素,并使用.offset().top.position().top。如果元素nn+1是第一个具有不同顶部偏移的元素,则它们必须位于不同的行中。

然后添加元素0n(连同它们的填充,边框和边距)的宽度以获取该行的总宽度。

(呵呵,不要忘了你的退出循环,因为你只需要计算第一行。)

+0

很好,谢谢! – Wesley

0

我不知道它的工作原理为浮动子节点,但你可以尝试添加“显示:inline-block的”到容器DIV没有指定宽度和高度。这种方式容器越来越窄...如果这就是你正在寻找的。

+0

我必须设置一个宽度,因为我正在制作一个旋转木马,点击next/prev时必须更新它的scrollLeft。有divs(页面)左侧浮动,里面是我认为是内联阻止的图像。如果我在设置它之前尝试获取宽度(),它只会返回零。 – Wesley

0

好了,你还没有真正告诉我们您的HTML,所以很难以非常具体建议,但我知道要做到这一点的唯一方法是测量网格元素的大单是如何它在页面后然后将容器设置为最接近的整数倍,以便容器中没有额外的空间。

jQuery具有非常有用的方法.width().innerWidth().outerWidth(),这取决于您正在尝试做什么。

如果容器本身具有保证金或填充,那么你将不得不在计算这就给其内部空间的整体量容器所需的宽度,以说明。

+0

由于某种原因,当我想获得这个div的宽度时,jquery返回零。 (在document.ready中) – Wesley

+0

您必须向我们展示HTML和代码,以便我们进一步提供帮助 - 否则我们所能做的就是提供疯狂的猜测。 jQuery的'。width()'适用于页面中可见的元素。 – jfriend00

0

你过于复杂了。你真的不需要这样做。你总是有这样的4张图片吗?如果是这样,你可以在元素容器上使用width: 25%; text-align:center;

+0

不,它可以只是1张图片,10张图片,100张图片。 – Wesley