Html Bilder mit Bildunterschrift nebeneinander wie?
2 Antworten
Nutze je Bild das figure-Element, um klar auszudrücken, dass Bild und Bildunterschrift zusammengehören. Die Positionierung nebeneinander lässt sich mit der Flexbox erreichen.
HTML:
<div class="row">
<figure>
<img alt="Some image" src="...">
<figcaption>Some image caption</figcaption>
</figure>
<figure>
<img alt="Some image" src="...">
<figcaption>Some image caption</figcaption>
</figure>
</div>
CSS:
.row { display: flex }
<div style="display:flex">
<div>
<img>
<p></p>
</div>
<div>
<img>
<p></p>
</div>
</div>
sowas sollte doch funktionieren, lange kein html benutzt aber so ähnlich sollte das doch klappen denke ich
doch, funktioniert ! Du musst natürlich ne Bildquelle angeben.
Hab es gerade getestet
<div style="display:flex">
<div>
<img src="https://www.kunst-im-oeffentlichen-raum-pankow.de/wp-content/uploads/2017/09/beispielbild.jpg">
<p>Beispieltext</p>
</div>
<div>
<img src="https://www.kunst-im-oeffentlichen-raum-pankow.de/wp-content/uploads/2017/09/beispielbild.jpg">
<p>Beispieltext</p>
</div>
</div>
ich habs auf keinem server, du kannst html datein auch offline ausführen, aber ich hab dir den kompletten code geschickt mit einem beispielbild
bei mir sind die aber nicht Neben sondern untereinander
kopiere doch den text bitte 1 zu 1 und erstelle dir eine html datei mit diesem inhalt, nicht abtippen sondern einfach kopieren und einfügen, das Beispiel Bild sollte auf jeden fall nebeneinander sein
ja sind sie, aber das bringt mir nichts wenn der Code nur so funktioniert
jetzt ist ein bild größer als das andere XD
dann gib deinem bild ein style element mit der richtigen größe
<img style="height:150px,width:auto">
oder so
Das ding ist die Bilden nebeneinander ist kein Problem, das die Bildunterschrift auch noch unter die muss ist das eigentliche.
ist doch in dem beispiel genau so geregell, du hast ein div und in diesem div ist ein img und ein p element.
und das div selbst ist in einem div mit einem flex attribut, ich verstehe nicht was du da machst, es ist doch ganz genauso in meinem beipsiel angeben.
nur um das klar zu stellen, das p ist der text der unter dem bild steht, aber du solltest mal am besten mit einem kurs über youtube anfangen oder so wenn du an so kleinigkeiten schon hängst
ne