Eingebettete Instagramposts auf Website?
Hallo, leider werden diese bei mir untereinander angezeigt. Hat jemand eine Idee wie ich den HTML Code umschreiben kann?
Damit die Beiträge nebeneinander angezeigt werden.
1 Antwort
Wenn wir erst einmal davon ausgehen, dass du nur HTML direkt in einen HTML-Editor eines CMS (oder irgendeiner Baukastensoftware) einbetten kannst, könnte eine Box mit Inline-Style eine einfache Lösung sein, in der du deine Post-Snippets einfügst. Die Elemente werden via Flexbox ausgerichtet:
<div style="display: flex">
<!-- post 1 -->
<!-- post 2 -->
<!-- etc. ... -->
</div>
So wird der Browser erst einmal versuchen, alle Beiträge auf eine Zeile zu packen, wobei er aber auch nicht davor halt macht, die einzelnen Posts kleiner zu skalieren. Mit flex-wrap kannst du einen automatischen Zeilenumbruch erlauben:
<div style="display: flex;flex-wrap: wrap">
<!-- ... -->
</div>
Abstände zwischen den Boxen kannst du mit dem gap-Property setzen (z.B. gap: 1px 2px; - der erste Wert steht für den horizontalen und der zweite Wert für den vertikalen Abstand der Boxen zueinander).
Alternativ zu einer Flexbox könnte man ebenso mit einem Grid arbeiten, welches feste Spalten (und optional auch Zeilen) vorgibt.
<div style="display: grid;grid-template-columns: 1fr 1fr;gap: 5px">
<!-- ... -->
</div>
In diesem Fall werden zwei Spalten erstellt, die sich den horizontal verfügbaren Platz gleichmäßig aufteilen und einen Abstand von 5px zueinander haben.
Mehr über Grids und Flexboxen kannst du auf MDN nachschlagen.
Solltest du die Möglichkeit haben, HTML und CSS voneinander zu separieren, wäre es gut, Klassenselektoren statt Inline-Styles zu verwenden.
Super gut. Das hat funktioniert. Danke für die Hilfe. Ich habe es mit der grid variante gemacht
Hallo, genau.., ich versuche dies in einen Baukasten einzufügen. Danke für den Tipp, das probiere ich gleich mal aus.