Powiedzmy, że mam sześć<div> elementy wewnątrz pojemnika<div>. Każdy z tych sześciu div jest kwadratem i ma styl CSSfloat: left stosowany. Domyślnie, gdy docierają do krawędzi kontenera<div> zawiną.

Moje pytanie brzmi teraz, czy za pomocą Javascript można ustalić, w którym elemencie jest zawijanie?

Jeśli są wyświetlane na stronie, takie jak:

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

Próbuję ustalić, że zawijanie występuje między drugim a trzecim elementem. W przypadku, gdy zastanawiasz się, czy straciłem rozum, powodem, dla którego próbuję to zrobić, jest kliknięcie jednego z tych pól, chcę być w stanie upuścić obszar informacji między wierszami za pomocą fantazyjnej jQuery.

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

Jakieś pomysły na ustalenie, gdzie następuje przerwa?

P.S. Powodem, dla którego się unoszę i pozwalam na automatyczne zawijanie, jest sprawienie, że będzie reagować. Jeśli teraz zmienię rozmiar przeglądarki, odpowiednio zawija ona pola. Nie chcę twardo kodować szerokości kolumn.

[EDYTOWAĆ] Dzięki odpowiedzi udzielonej przez Explosion Pills udało mi się znaleźć rozwiązanie.

// 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++;
});

Spowoduje to wyświetlenie w konsoli następujących informacji:

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

Kiedy miałem 30 skrzynek, w których było 7 pudełek i 5 rzędów (ostatni rząd tylko 2 pola)