Zeige ein div zwischen Flex-Elementen
Ich erstelle eine Seite, die mit <div> elements gefüllt ist. Der Container, der dieses div enthält, hat display: flex; . Die Elemente werden automatisch in mehrere Zeilen umgebrochen. Jetzt möchte ich auf ein Element klicken, um ein weiteres <div> mit Informationen zum ausgewählten Objekt zu öffnen. Aber dieses info-div sollte unter die Zeile kommen, die das ausgewählte div und die volle Breite des Containers enthält.
Ich weiß nicht, wie ich das machen soll. Ich habe ein einfaches JsFiddle erstellt: Ссылка
Ich erhalte das click -Ereignis und dynamiccaly fügt das dinfo-div mit Angular hinzu. Meine Frage dreht sich hauptsächlich darum, wie man es stylen soll, damit es nicht mit den Flex-Items durcheinander kommt und eine Breite des Containers hat.
Auch ich habe dieses Bild um zu visualisieren, was ich vorhabe.
Ich hoffe, Sie können mir dabei helfen.
1 Antwort
Ich habe den HTML-Code geringfügig modifiziert, indem ich .item in ein .item-container eingeschlossen habe, um das gewünschte Styling zu erreichen.
Ich verwende auch :after element, um die Informationen von title von .infobox anzuzeigen.
Um die Breite zu füllen, habe ich ein div mit fester Höhe und einem absolut positionierten :after hinzugefügt, das auf .container verweist, um die volle Breite zu erhalten, klicke auf .item , um die Informationen zu sehen das heraus.
Ohne :after element zu verwenden, versuchen Sie dies