Zum direkten Testen noch mal meine komplette Testdatei:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Cardlayout mit Float</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Weiterleitung -->
<!-- <meta http-equiv="refresh" content="0; URL=name.html"> -->
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
/*Überschriften - font-family: 'Roboto Slab', Serif;*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/*Fließtext - font-family: 'Roboto', Sans-Serif";*/
@import url(https://fonts.googleapis.com/css?family=Roboto);
/*Zahlen* - font-family: 'Merriweather';*/
@import url(https://fonts.googleapis.com/css?family=Merriweather);
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
/*Basisangaben*/
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
/*box-sizing: border-box;*/
min-width: 1px;
}
html {
}
body {
/*padding: 1rem 0.5rem 2rem 0.5rem;*/
/*margin: 0rem 0rem 0rem 0rem;*/
margin: 1rem 1rem 1rem 1rem;
}
}
/*Schriften*/
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/*darkblue*/
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
sup {
font-size: 0.75rem;
}
.zahl {
font-family: "Merriweather";
font-size: 0.75rem;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0px;
}
}
/*Listen dl*/
@media all {
dl {
margin: 0.5rem 0rem 0.5rem 0rem;
}
dt,
dd {
}
dt {
font-weight: bold;
margin: 0rem 0rem 0rem 0rem;
}
dt:nth-of-type(1n+2) {
margin: 1rem 0rem 0rem 0rem;
}
dd {
margin: 0rem 0rem 0rem 0rem;
}
dd p {
margin: 0rem 0rem 0rem 0rem;
}
}
/*.buchvorstellung*/
@media all {
.buchvorstellung {
}
.buchvorstellung section {
padding: 0.5rem;
border: 1px solid grey;
margin-bottom: 1rem;
}
.buchvorstellung section>h1 {
}
.buchvorstellung section>div {
}
.buchvorstellung section>div figure {
margin-bottom: 1rem;
}
.buchvorstellung section>div figure img {
}
.buchvorstellung section>div p {
}
.buchvorstellung section>p {
text-align: right;
}
.buchvorstellung section>p a {
}
}
@media only screen and (min-width: 650px) {
.buchvorstellung {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
grid-auto-rows: 1fr;
}
.buchvorstellung section {
display: flex;
flex-direction: column;
}
.buchvorstellung section>h1 {
}
.buchvorstellung section>div {
overflow: hidden;
margin-bottom: 1.5rem;
}
.buchvorstellung section>div figure {
float: left;
max-width: 350px;
margin-right: 1rem;
}
.buchvorstellung section>div figure img {
}
.buchvorstellung section>div p {
}
.buchvorstellung section>p {
margin-top: auto;
}
.buchvorstellung section>p a {
}
}
/*.buchvorstellung: Farben, Abstände, Rahmen*/
@media all {
.buchvorstellung {
}
.buchvorstellung section {
}
.buchvorstellung section>h1 {
}
.buchvorstellung section>div {
}
.buchvorstellung section>div figure {
}
.buchvorstellung section>div figure img {
}
.buchvorstellung section>div p {
}
.buchvorstellung section>p {
}
.buchvorstellung section>p a,
.buchvorstellung section>p a:link,
.buchvorstellung section>p a:visited {
}
.buchvorstellung section>p a:hover,
.buchvorstellung section>p a:focus,
.buchvorstellung section>p a:active {
}
}
@media only screen and (min-width: 0px) {
}
/*Vorlagen zum Kopieren*/
/*CSS*/
@media all {
}
@media only screen and (min-width: 0px) {
}
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<header id="pageheader" class="pageheader">
<h1>Cardlayout mit Float</h1>
</header>
<nav id="navigation" class="navigation">
</nav>
<main id="content" class="content">
<article class="buchvorstellung">
<section>
<h1>Bildband: Nationalparks im Südwesten der USA</h1>
<div>
<figure>
<img src="https://www.mariposa-designography.com/images/printdesign/bildband_np-usa/bildband_np-usa_vorschau.jpg">
</figure>
<p>Dieser Bildband ist als Projekt im Rahmen des Fachlehrgangs Grafik und Mediengestaltung 2019/2020 am BFI Tirol entstanden.</p>
<p>Er enthält Wissenswertes über 10 verschiedene Nationalparks im Südwesten der USA, die ich auf meiner Reise im Sommer 2019 besucht habe. Zudem beinhaltet er ca. 400 Bilder, die ich selbst fotografiert habe.</p>
<p>Gestaltet wurde der Bildband in Adobe InDesign und Adobe Illustrator. Die Fotos wurden in Adobe Photoshop entwickelt und bearbeitet.</p>
</div>
<p>
<a class="button" href="https://1drv.ms/b/s!AhBawRxJHgjQaYfol-obkCDNdjo" target="_blank">Bildband ansehen</a>
</p>
</section>
<section>
<h1>Bildband: Nationalparks im Südwesten der USA</h1>
<div>
<figure>
<img src="https://www.mariposa-designography.com/images/printdesign/bildband_np-usa/bildband_np-usa_vorschau.jpg">
</figure>
<p>Dieser Bildband ist als Projekt im Rahmen des Fachlehrgangs Grafik und Mediengestaltung 2019/2020 am BFI Tirol entstanden.</p>
</div>
<p><a class="button" href="https://1drv.ms/b/s!AhBawRxJHgjQaYfol-obkCDNdjo" target="_blank">Bildband ansehen</a></p>
</section>
<section>
<h1>Bildband: Nationalparks im Südwesten der USA</h1>
<div>
<figure>
<img src="https://www.mariposa-designography.com/images/printdesign/bildband_np-usa/bildband_np-usa_vorschau.jpg">
</figure>
<p>Dieser Bildband ist als Projekt im Rahmen des Fachlehrgangs Grafik und Mediengestaltung 2019/2020 am BFI Tirol entstanden.</p>
<p>Er enthält Wissenswertes über 10 verschiedene Nationalparks im Südwesten der USA, die ich auf meiner Reise im Sommer 2019 besucht habe. Zudem beinhaltet er ca. 400 Bilder, die ich selbst fotografiert habe.</p>
</div>
<p><a class="button" href="https://1drv.ms/b/s!AhBawRxJHgjQaYfol-obkCDNdjo" target="_blank">Bildband ansehen</a></p>
</section>
</article>
</main>
<aside class="sidebar">
</aside>
<footer id="pagefooter" class="pagefooter">
<p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/9744-text-soll-bild-umflie%C3%9Fen-responsive/">https://www.html-seminar.de/</a></p>
</footer>
</body>
</html>Zum Einrichten von Farben, Abständen, Rahmen und so weiter ohne das Layout versehentlich zu zerstören habe ich einen leeren CSS-Block "/*.buchvorstellung: Farben, Abstände, Rahmen*/" eingefügt.