Fügen Sie ein Div unterhalb der umbrochenen Inline-Block-Zeile hinzu
Ich habe eine Liste von Inline-Block-Elementen, die mehrere Zeilen bilden. Ich möchte ein div-Element zwischen einer der Zeilen anzeigen, je nachdem, wo sich ein bestimmtes Element befindet. Beispielsweise sind die ersten paar Zeilen nummeriert:
Nummerierte Inline-Block-Elemente http://i43.tinypic.com/2zxw9jt.jpg
Wenn ich auf das dritte Element abzielen und ein Element in voller Länge anzeigen wollte (100% des Div, das die Blöcke enthält), würde das so aussehen:
zwischen der ersten und zweiten Zeile http://i39.tinypic.com/qsr51h.jpg
Die Position des Div in voller Länge wäre für jeden der Blöcke 1 bis 5 dieselbe. Oder wenn ein anderer Block wie 7 oder 8 als Ziel ausgewählt wurde, sieht er folgendermaßen aus:
zwischen der zweiten und dritten Zeile http://i43.tinypic.com/j14lua.jpg
Beachten Sie, wie die Zeilen "nach unten verschoben" werden. Ich verstehe, wie man das mit Block-Level-Elementen macht, aber nicht zwischen Zeilen von umbrochenen Inline-Block-Elementen. Die Zeilen, in denen sich jeder der nummerierten Blöcke befinden würde, würden sich ändern, wenn sich die Breite des Browserfensters ändert, und das Div in voller Länge würde "wissen", welche Zeile darunter positioniert werden soll.
Wie würde jemand vorgehen, um das Div unter dieser bestimmten Reihe von Elementen zu platzieren? Ist es mit einer relativen oder absoluten Position mit CSS möglich? Könnte sich die Zeilenposition dynamisch ändern, wenn die Blöcke bei Änderungen der Fensterbreite neu angeordnet werden?
AKTUALISIEREN: Hier ist eincodepen das hat die blöcke und das eingefügte div. Das div ist so gestaltet, dass es absolut positioniert ist, und kann an die entsprechende Position verschoben werden, indem es nach dem gewünschten Blockelement-Tag eingefügt wird, aber ich kann die Zeile darunter immer noch nicht dazu bringen, Platz zu schaffen und nach unten zu rutschen.