Nein, das interpretierst du vollkommen falsch. Unwissenheit hat überhaupt nichts mit Idiotie oder sonstigen negativen Eigenschaften zu tun.
HTML und CSS haben überhaupt nichts mit Lebenserfahrung, Geschicklichkeit, angeborenen Fähigkeiten und ähnlichem zu tun. Sondern die sind sehr lebensfremd. Deshalb muss das gelernt werden. Vor der Einführung von CSS war das noch relativ einfach möglich. Die Zeiten sind aber schon lange vorbei.
Um das Lernen der Grundlagen kommst du deshalb nicht herum. Und erst wenn du die Grundlagen kennst kann dir bei einzelnen Problemen sinnvoll geholfen werden.
Ich kann dir gerne eine Beispielseite zur Verfügung stellen, die ich mal für einen anderen Fragesteller geschrieben habe. Du musst den Quellcode nur in einer UTF-Datei abspeichern, kannst die Seite dann direkt im Browser aufrufen und ausprobieren. Zum Beispiel was bei schmaleren Fenstern passiert.
Ich wage aber zu bezweifeln dass dir die weiterhilft.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Cardlayout 01 Flexbox</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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);
/*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;
}
}
/*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;
}
}
/*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;
}
}
/*.cardlayout*/
@media all {
.cardlayout {
border: 2px solid grey;
display: flex;
flex-wrap: wrap;
}
.cardlayout img {
min-width: 1px;
display: block;
max-width: 100%;
border: 0px;
}
.cardlayout h3 {
margin: 0.1rem 0.5rem 0rem 0.5rem;
}
.cardlayout p {
margin: 0.1rem 0.5rem 0rem 0.5rem;
}
.cardlayout p:last-child {
margin-bottom: 1.0rem;
}
}
@media only screen and (min-width: 600px) {
.cardlayout>* {
width: calc(50% - 0.25rem);
}
.cardlayout>*:not(:nth-child(2n+2)) {
margin-right: 0.5rem;
}
}
@media only screen and (min-width: 900px) {
.cardlayout>* {
width: calc(33.3333% - 0.3333rem);
}
.cardlayout>*:not(:nth-child(2n+2)) {
margin-right: 0rem;
}
.cardlayout>*:not(:nth-child(3n+3)) {
margin-right: 0.5rem;
}
}
@media only screen and (min-width: 1100px) {
.cardlayout>* {
width: calc(25% - 0.375rem);
}
.cardlayout>*:not(:nth-child(3n+3)) {
margin-right: 0rem;
}
.cardlayout>*:not(:nth-child(4n+4)) {
margin-right: 0.5rem;
}
}
@media only screen and (min-width: 1300px) {
.cardlayout>* {
width: calc(20% - 0.401rem);
}
.cardlayout>*:not(:nth-child(4n+4)) {
margin-right: 0rem;
}
.cardlayout>*:not(:nth-child(5n+5)) {
margin-right: 0.5rem;
}
}
</style>
</head>
<body>
<header id="pageheader" class="pageheader">
<h1>Cardlayout mit Flexbox</h1>
</header>
<nav id="navigation" class="navigation">
</nav>
<main id="content" class="content">
<h2>Aufgabe</h2>
<p>Die Bilder sollen linksbündig angeordnet sein. In jeder Zeile sollen die Bilder links- und rechtsbündig ohne Abstand am Containerrand / Bildschirmrand stehen und sie sollen durch einen Abstand getrennt sein.</p>
<p>Eine Lösung mit "justify-content: space-between" kommt nicht in Betracht, da dann die Bilder nicht immer linksbündig angeordnet werden.</p>
<h2>Lösung mit Flexbox</h2>
<article class="cardlayout">
<section>
<img src="http://lorempixel.com/600/300/transport/2">
<h3>Ein Flugzeug</h3>
<p>EP ⋅ 859712829535</p>
</section>
<section>
<img src="http://lorempixel.com/600/300/transport/5">
<h3>Der Porsche</h3>
<p>EP ⋅ 859712829535</p>
</section>
<section>
<img src="http://lorempixel.com/600/300/transport/8">
<h3>Das Mini</h3>
<p>EP ⋅ 859712829535</p>
</section>
<section>
<img src="http://lorempixel.com/600/300/nature/2">
<h3>Eine Insel mit zwei Bergen</h3>
<p>EP ⋅ 859712829536</p>
</section>
<section>
<img src="http://lorempixel.com/600/300/nature/10">
<h3>Der Wasserhahn tropft</h3>
<p>EP ⋅ 859712829537</p>
</section>
<section>
<img src="http://lorempixel.com/600/300/abstract/1">
<h3>Nach der Feier</h3>
<p>EP ⋅ 859712829538</p>
</section>
<section>
<img src="http://lorempixel.com/600/300/animals/8">
<h3>Ein Hund bellt - oder auch nicht</h3>
<p>EP ⋅ 859712829539</p>
</section>
</article>
</main>
<aside class="sidebar">
</aside>
<footer id="pagefooter" class="pagefooter">
<p>Originaldiskussion: <a href="https://www.html.de/threads/problem-div-container-fuer-responsive-seite-richtig-einrichten.59028/">https://www.html.de/</a></p>
</footer>
</body>
</html>Ohne div-Elemente, weil die nach den aktuellen HTML-Regeln nicht zulässig sind. Bildergrößen und und und können natürlich mit ganz normalem CSS natürlich geändert und den persönlichen Wünschen angepasst werden.