Zur Navigation

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 &Auml;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&auml;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">&nbsp;</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&auml;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

28.02.2024 19:27

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

29.02.2024 09:07 | geändert: 29.02.2024 09:13

3 Johann1949

vielen Dank für diese Info werde ich sofort ausprobieren

29.02.2024 09:45

4 Johann1949

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

29.02.2024 11:17

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]