Hallo MrMurphy,
dann biete ich dir als Lösung Flexbox an. Das entscheidende CSS lautet schlicht
@media all {
article {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
section {
padding-left: 0.5rem;
padding-right: 0.5rem;
-webkit-flex-basis: 33.33%;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
}
img {
display: block;
margin-bottom: 1rem;
}
}
@media only screen and (max-width: 500px) {
article {
display: block;
}
section {
padding-left: 0.5rem;
padding-right: 0.5rem;
width: 100%;
}
}
Vielen vielen Dank! Genau so habe ich mir das vorgestellt.
> Soweit ich verstanden habe kommt es dir darauf an, das die Bilder ohne weitere Beschreibung untereinander angeordnet sind. Deshalb habe ich mal eine Beispielseite mit verschieden großen Bildern erstellt und zur Info auch gleich etwas Responsive Design (bei unter 500px Fensterbreite) eingebaut.
Genau die Bilder haben kein Beschreibung bzw. doch die haben eine Beschreibung diese wird an einer anderen Stelle platziert. Der Aufbau sieht so aus:
- Titel
- Beschreibung
- Bilder
Wenn später das ganze responsiv werden soll habe ich die Möglichkeit die Beschreibung z.B. auszublenden oder an einer ganz anderen Stelle (unten) anzeigen zu lassen. Aber soweit bin ich noch lange nicht.
> Und lass bloß die unnötigen DIVs weg.
Ich bin auch kein Freund davon zick DIVs zu nehmen. Vor allem es macht sau viel Arbeit zu stylen usw..