第一排浮动元素的宽度？

Question

假设我有一堆div左移，像时尚网格一样。它们放在一个宽度固定的容器中。

现在我想知道第一行的宽度！这样我就可以将宽度与固定宽度进行比较，看看那里是否有很多空格，我想通过将容器宽度设置为第一行元素的宽度来最小化。

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

请参阅此示例：http://i54.tinypic.com/256wdjn.png（不要介意华丽的颜色，仅用于测试）

右侧有太多的空白区域..由于边距，边框宽度，图像宽度等都是动态的，我不能事先计算出来。

谢谢！

Answer 1

从广义上讲，您可以做的是遍历嵌套元素并使用.offset().top或.position().top。如果元素n和n+1是具有不同顶部偏移的第一个元素，则它们必须位于不同的行中。

然后将元素0的宽度添加到n（连同它们的填充，边框和边距）以获得该行的总宽度。

（哦，不要忘记退出循环，因为你只需要计算第一行。）

Answer 2

我不确定它是否适用于浮动子节点，但您可以尝试将“display：inline-block”添加到容器div中，而不指定宽度和高度。通过这种方式，容器变得尽可能地狭窄......如果这就是你正在寻找的东西。

Answer 3

嗯，你还没有真正向我们展示你的HTML所以很难给出非常具体的建议，但我知道这样做的唯一方法就是测量一个网格元素在页面中的大小，然后将容器设置为最接近的整数倍，以便容器中没有额外的空间。

jQuery具有非常有用的方法.width()，.innerWidth()和.outerWidth()，可根据您的具体操作进行测量。

如果容器本身有边距或填充，那么在计算容器的所需宽度时，您必须考虑到这一点，该容器在其内部留下了整体空间。

Answer 4

你过度复杂了。你真的不需要做任何这些。你总有这样的4张照片吗？如果是这样，您可以在元素容器上使用width: 25%; text-align:center;。