<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
div.float-alt {
display: grid;
grid-template-columns: 1fr 1fr;
}
div.float-alt>img {
width: 100%;
height: auto;
min-width: 1px;
grid-row: 1/999;
}
p {
grid-column: 2/3;
visibility: visible;
}
p.hide-it {
visibility: hidden;
}
p.put-it-down {
grid-column: 1/3;
}
</style>
</head>
<body>
<h2>eine Überschrift </h2>
<div class="float-alt">
<img src="images/dia0.jpg">
<p>Absatz-1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
</p>
<p>Absatz-2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
</p>
<p>Absatz-3: Lorem ipsum dolor sit amet, consetetur
sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero
eos et accusam et justo duo dolores et ea rebum. <strong>Lorem ipsum dolor</strong> sit amet, consetetur
sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At
vero
eos
et accusam et justo duo dolores et ea rebum.
</p>
<p>Absatz-4: Lorem ipsum dolor sit amet, consetetur
sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero
eos et accusam et justo duo dolores et ea rebum. <strong>Lorem ipsum dolor</strong> sit amet, consetetur
sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At
vero
eos
et accusam et justo duo dolores et ea rebum.
</p>
</div>
<script>
let timer;
function layoutIt() {
// Wir zählen die Anzahl von Spalten, die das Bild
// überspannen muss:
let spanImg = 1;
const pars = document.querySelectorAll('.float-alt>p');
// Über alle Absätze:
pars.forEach(p => {
// Am Anfang müssen alle Absätze rechts liegen:
p.classList.add('hide-it');
p.classList.remove('put-it-down');
});
document.querySelector('.float-alt>img').style.gridRow = `1/999`;
setTimeout(() => {
pars.forEach(p => {
const
boxImg = document.querySelector('.float-alt>img').getBoundingClientRect(),
boxP = p.getBoundingClientRect();
// Liegt die untere Kante des Absatzes tiefer als die des Bildes?
if (boxP.bottom > boxImg.bottom) {
// Etwas von dem Absatz ist nach links geflossen,
// wir verschieben ihn nach unten:
p.classList.add('put-it-down');
} else {
// Das Bild muss diese Zeile überspannen:
spanImg++;
}
p.classList.remove('hide-it');
});
// Endgültig fest legen, welche Zeilen das Bild überspannen muss:
document.querySelector('.float-alt>img').style.gridRow = `1/${spanImg}`;
});
}
layoutIt();
timer = setTimeout(layoutIt, 100);
window.addEventListener('resize', event => {
clearTimeout(timer);
timer = setTimeout(layoutIt, 100);
});
</script>
</body>
</html>
