Text neben Bild auf Gundline (baseline? bottom?)

1 als Johann1949 (Gast)

ich würde gerne drei oder vier Zeien Text neben einer Grafik positionieren wobei alle Zeilen an der Unterkante des Bildes stehen (auch mit <div></div> bekomme ich es nicht hin) und wäre für jede Hilfe dankbar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>versuch</title>
<meta name="description" content="versuch - baseline.htm">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta http-equiv="expires" content="erstellt Mitte Feber 2024 - letzte Änderung: 28. Feber 2024">
<style type="text/css">
a:link { text-decoration:none; color:#0000ff; }
a:visited { color:#0000ff; }
a:hover { text-decoration:none; color:#ff0000; }
a:active { text-decoration:none; color:#00ff00; }
body { background-color:#eeeeee; }
.box { background-color:#ccffcc;
border-color:#800000;
border-width:1px;
border-style:solid; }
.text1 {
border-width:0px;
border-style:solid;
border-color:#800000;
text-align:justify;
background-color:#ccffcc;
font-familiy:Times;
font-size:14pt;
font-color:#800000;
font-weight:normal;
padding-top:6pt;
padding-left:6pt;
padding-right:6pt;
padding-bottom:6pt; }
</style>
</head>
<body text="#800000" bgcolor="#eeeeee" link="#ff0000" alink="#0000ff" vlink="#ff0000">

<table style="width:100%; float:left" class="box">
<tr>
<td class="text1">
<img src="bild.png" alt="" style="float:left; width:150px; height:200px; border:0px">
</td>
<td class="text1">
<span style="float:right; font-size:12pt; height:200px; text-valign:bottom"><b>Erklärung</b><br>Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.</span>
</td>
</tr>
</table>
<span style="font-size:6pt"> </span><br>
<table style="width:100%; float:left" class="box">
<tr>
<td class="text1">
<img src="bild.png" width="150" height="200" style="text-align:justify" alt="">
<span style="float:right; vertical-align:text-baseline; font-size:12pt"><b>Erklärung</b><br>Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.</span>
</td>
</tr>
</table>

</body>
</html>

Vilen Dank im Voaraus

2 Jörg Kruse

Das lässt sich am besten mit einer Flexbox realisieren.

Der HTML-Aufbau könnte so ausschauen:

<div class="box">
    <div class="image">
        <img src="test.png" alt="" width="150" height="200">
    </div>
    <div class="text">
        Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.
        Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.
        Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.
        Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.
        Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.
    </div>
</div>

Das dazugehörige CSS:

div.box {
  display: flex;
}
div.image {
  padding-right: 1em;
}
div.text {
  align-self: flex-end;
}

Mit "align-self: flex-end;" wird der Inhalt von div.text am unteren Ende der Flexbox (div.box) positioniert.

Einen guten Einstieg in die Flexbox bietet diese Seite auf SELFHTML:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox

3 Johann1949

vielen Dank für diese Info werde ich sofort ausprobieren

4 Johann1949

hat wunderbar geklappt und vielen Dank für die prompte Hilfe

Text neben Bild auf Gundline (baseline? bottom?)

Beitrag schreiben (als Gast)