Ширина первого ряда плавающих элементов?

Question

Скажите, что у меня выпала куча дивов в виде сетки. Они находятся в контейнере с фиксированной шириной.

Теперь я хотел бы знать ширину первого ряда! так что я могу сравнить эту ширину с фиксированной шириной и посмотреть, есть ли там много пробелов, которые я хотел бы минимизировать ... установив ширину контейнера в ширину первого ряда элементов.

Теперь, проблема в том, что, когда я плаваю в элементах, нет понятия первого или второго ряда. Ну, мне не нужно знать первую ширину строки, мне просто нужно знать nr пикселей белого пустого пространства рядом с последним элементом справа от контейнера.

См. Этот пример: http://i54.tinypic.com/256wdjn.png (не обращайте внимания на яркие цвета, только для тестирования)

На правой стороне слишком много пустого пространства ... Я не могу просто рассчитать это заранее, так как поля, ширина границы, ширина изображения и т. Д. Все являются динамическими ..

Спасибо!

Answer 1

В общем, вы можете перебирать вложенные элементы и использовать .offset().top или .position().top.Если элементы n и n+1 являются первыми элементами, которые имеют разные верхние смещения, они должны быть в разных строках.

Затем добавьте ширину элементов от 0 до n (вместе с их отступами, границами и полями), чтобы получить общую ширину этой строки.

(О, и не забудьте выйти из цикла, поскольку вам нужно было только вычислить первый ряд.)

Answer 2

Ты слишком усложняешь это.Вам действительно не нужно ничего этого делать.У вас всегда есть 4 таких изображения?Если это так, вы можете просто использовать width: 25%; text-align:center; для контейнера элементов.

Answer 3

Ну, вы на самом деле не показывали нам свой HTML, так что советовать очень сложно, но я знаю только один способ сделать это - измерить, насколько велик один из элементов сетки после того, как он находится на странице, а затем установите контейнер на ближайший целочисленный коэффициент, чтобы в контейнере не было дополнительного пространства.

jQuery имеет очень полезные методы .width(), .innerWidth() и .outerWidth() для измерения в зависимости от того, что именно вы пытаетесь сделать.

Если сам контейнер имеет поля или отступы, то вам придется учитывать это при вычислении желаемой ширины контейнера, которая оставляет целое количество пространства внутри.

Answer 4

Я не уверен, что это работает для плавающих дочерних узлов, но вы можете попробовать добавить «display: inline-block» в контейнер div без указания ширины и высоты. таким образом, контейнер становится настолько узким, насколько это возможно ... если это то, что вы ищете.