Box mit Bild und Link in HTML?
Ich möchte mehrere Boxen untereinander auflisten. Möchte innerhalb einer dieser Boxen auf der linken Seite ein kleines Bild und daneben den Link dazu. Weiß jemand wie ich das machen kann?
2 Antworten
Vom Beitragsersteller als hilfreich ausgezeichnet
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
Mit einem Flexlayout kannst du Elemente leicht nebeneinander positionieren.
HTML:
<article class="some-box">
<img alt="..." height="..." src="..." width="...">
<p>Some link</p>
</article>
CSS:
.some-box {
display: flex;
}
Einen horizontalen Abstand kannst du mit dem column-gap-Property setzen. Zusätzlich könntest du den Kindelementen noch eine Breite zuordnen.
.some-box > * { width: 50% }
Am besten im CSS mit Display:flex; und flex-direction:column; Das gibst du dem Eltern-Div.
Da rein kommen dann divs für Bild+Text und diese Divs bekommen ebenfalls Display:flex; aber flex-direction:row; Bild und Text auf width:50%; und dann sollte es gehen.