@@Yadgar
Und mitunter sagt ein Bild mehr als tausend Worte.
Bitteschön:
Und in dem Fall sagt ein Bild etwas ganz anderes als tausend Worte.
Du willst nicht „Text mit zweispaltigem Satz formatieren“, sondern die Bilder vom Text umfließen lassen?
Und hier ein Stück Code dazu:
<body>
<h2>Rustication (architecture)</h2>
<hr>
<h4>From Wikipedia, the free encyclopaedia</h4>
h2 ist falsch; du darfst keine Überschriftsebenen überspringen. Die Hauptüberschrift ist h1.
hr ist nicht richtig, denn dieses Element trennt Inhalte. Eine Überschrift soll aber nicht vom nachfolgenden Inhalt getrennt werden. Wenn visuell du eine horizontale Linie möchtest, ist diese mit CSS umzusetzen: als border-bottom der Überschrift.
h4 ist falsch; du darfst keine Überschriftsebenen überspringen. Nach h2 käme h3; nach h1 käme h2. Hier handelt es sich aber überhaupt nicht um eine Überschrift; das ist Text: p.
Der gehört zusammen mit der Überschrift zum Kopf des Dokuments: header:
<body>
<header>
<h1>Rustication (architecture)</h1>
<p>From Wikipedia, the free encyclopaedia</p>
</header>
Wenn die Bilder vom Text umflossen werden sollen (float), müssen sie im HTML vor dem Text stehen.
Zur Gruppierung von Bild und Bildunterschrift bietet sich das figure-Element an; die Bildunterschrift ist figcaption. Damit die Bildunterschrift nicht breiter wird als das Bild, wird die Breite des figure-Element gesetzt, min-content wäre der passende Wert, aber wenn’s auch in IE/Edge funktionieren soll: auf feste Breite, die ja durch die Bildbreite gegeben ist.
Die figure-Elemente bekommen über ihre ID float: right bzw. left verpasst. (Ginge auch über eine entsprechende Kennzeichnung im Markup (Klasse oder anderes Attribut wie data-align), aber die Darstellung sollte nicht im HTML stehen.) Damit zwei aufeinanderfolgende figure-Elemente nicht nebeneinander, sondern untereinander dargestellt werden, bekommen sie auch entsprechendes clear mit.
Der neben den Bildern fließende Text braucht natürlich eine gewisse Breite, also wird das float per media query erst angewandt, wenn genügend Platz vorhanden ist.
Sieht dann so aus.
LLAP 🖖
PS: Und jetzt erklär mal bitte, wie „dass es … bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt“ im OP gemeint war. Willst du doch nicht die Bilder vom umfließen lassen, d.h. dein Screenshot stellte gar nicht das Gewünschte dar?
--
“When UX doesn’t consider
all users, shouldn’t it be known as ‘
Some User Experience’ or... SUX? #a11y” —
Billy Gregory
Gunnar Bittersmann
Felix Riesterer
marctrix
Tabellenkalk
