Einzelnen Beitrag anzeigen
  #13 (permalink)  
Alt 14.04.2019, 16:04
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Zitat:
Zu Deiner Aussage "Grid ist Mist": das habe ich nirgendwo geschrieben. So etwas liegt mir fern.
Damit habe ich nicht dich gemeint, sondern diejenigen, die helfen wollen, sich aber selbst nicht mit der Materie auskennen. Das hast du also vollkommen falsch verstanden. Wenn die bestimmte Lösungen nicht verwenden wollen, sollen die das gerne schreiben. Aber nicht schreiben, dass die Lösung grundsätzlich nichts taugt.

Zitat:
Bei einer Fotogalerie ist es üblich, dass die Größe der Vorschaubilder gleich bleibt.
Das kann man so machen. Allerdings hat das dann nichts mit flexiblem Layout zu tun. Außerdem finden es viele Leute nicht schön, wenn die Abstände zwischen Bildern elend breit sind. Oder wenn bei zweispaltigem Layout die Bilder links und rechts außen kleben und dazwischen ein riesiger Abstand ist. Oder wenn bei vierspaltigem Layout zwei Bilder in der letzten Zeile links und rechts außen kleben.

Zu deinem nicht funktionierendem Beispiel. Ich habe mal ein Beispiel erstellt. Es funktioniert ohne negative Abstände, es gibt keine Probleme mit nachfolgenden Absätzen. Die Bilder passen wie von dir gewünscht ihre Größe nicht an.

Ohne JavaScript lassen sich meiner Kenntnis nach aber die Abstände nicht ähnlich wie bei column-gap händeln. Wenn jemand eine bessere Lösung hat gerne her damit.

Zu meinem HTML-Quelltext kann dazu das folgende CSS verwendet werden:

Code:
.cardlayout {
   border: 2px solid grey;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.cardlayout section {
   max-width: 400px;
}
.cardlayout img {
   min-width: 1px;
   display: block;
   max-width: 100%;
   border: 0;
}
.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;
}
Dazu musste ich aus meinem dritten CSS-Beispiel nur die ersten Zeilen anpassen. Also Aufwand gleich Null.
Mit Zitat antworten