Определить место переноса в плавающих элементах

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

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

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

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

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

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

Любые идеи по определению места разрыва?

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

[РЕДАКТИРОВАТЬ] Благодаря ответу, предоставленному 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 ящика)

10
задан Gabriele Petrioli 9 July 2012 в 19:04
поделиться