Nehmen wir an, ich habe sechs<div> Elemente in einem Container<div>. Jede dieser sechs Divs ist ein Quadrat und hat den CSS-Stilfloat: left angewendet. Standardmäßig, wenn sie den Rand des Containers erreichen<div> sie werden einwickeln.

Nun ist meine Frage, mit Javascript, ist es möglich zu bestimmen, an welchem ​​Element der Wrap ist?

Wenn sie auf der Seite wie folgt angezeigt werden:

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

Ich versuche festzustellen, dass der Zeilenumbruch zwischen dem zweiten und dritten Element erfolgt. Wenn Sie sich fragen, ob ich den Verstand verloren habe, ist der Grund, warum ich dies versuche, wenn auf eines dieser Kästchen geklickt wird, dass ich in der Lage sein möchte, einen Infobereich zwischen den Zeilen mit einer ausgefallenen shmansy jQuery abzulegen.

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

Irgendwelche Ideen zur Bestimmung, wo die Pause auftritt?

P.S. Der Grund, warum ich schwebe und es automatisch umbrechen lasse, ist, es reaktionsfähig zu machen. Wenn ich jetzt die Größe des Browsers ändere, werden die Kästchen entsprechend umbrochen. Ich möchte Spaltenbreiten nicht hart codieren.

[BEARBEITEN] Dank der Antwort von Explosion Pills konnte ich eine Lösung finden.

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

Dies gab Folgendes in der Konsole aus:

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

Als ich 30 Kisten hatte, die 7 Kisten breit und 5 Reihen waren (letzte Reihe nur 2 Kisten)