Допустим, у меня есть шесть<div> элементы внутри контейнера<div>, Каждый из этих шести элементов является квадратом и имеет стиль CSSfloat: left применяется. По умолчанию, когда они достигают края контейнера<div> они завернут.

Теперь мой вопрос, используя Javascript, можно ли определить, к какому элементу относится обтекание?

Если они отображаются на странице, как:

 ___   ___
| 1 | | 2 |
----- -----
 ___   ___
| 3 | | 4 |
----- -----

Я пытаюсь определить, что обтекание происходит между вторым и третьим элементом. Если вам интересно, не сошел ли я с ума, я пытаюсь это сделать, если щелкнуть мышью по одному из этих блоков, и я хочу иметь возможность раскрыть информационную область между строками с каким-нибудь причудливым шманским jQuery.

 ___   ___
| * | | ! |
----- -----
| Someinfo|
 ___   ___
| * | | * |
----- -----

Любые идеи по определению, где происходит перерыв?

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

[EDIT] Благодаря ответу, предоставленному Explosion Pills, я смог найти решение.

// Offset of first element
var first = $(".tool:first").offset().left;
var offset = 0;
var count = 0;

$(".box").each(function () {

   // Get offset            
   offset = $(this).offset().left;

   // If not first box and offset is equal to first box offset
   if(count > 0 && offset == first)
   {
      // Show where break is
  console.log("Breaks on element: " + count);
   }

   // Next box
   count++;
});

Это выводит следующее в консоли:

Breaks on element: 7 
Breaks on element: 14
Breaks on element: 21
Breaks on element: 28 

Когда у меня было 30 коробок, которые в итоге получили 7 коробок в ширину и 5 рядов (в последнем ряду только 2 коробки)