Hallo,
könnte mir bitte jemand ein Beispiel für HTML und CSS in div und co geben für folgeden Screenshot ?
Nur nicht untereinander sondern immer 2 Stück nebeneinander
für das A B C D sollen dann kleinere Bilder ca 60x60px rein kommen an statt Buchstaben.
xx xx
xx xx
usw
vielen Dank
Mit Flexbox. Oder die alte Float-Methode anwenden. Google hilft weiter.
float lass mal lieber gleich sein. 
Flexbox war denke ich schon der richtige Hinweis, damit würdest Du das ganze sogar relativ leicht responsive bekommen.
Hallo
Ich würde zu dem HTML
<section class="cards">
<article class="card">
<figure>
<img src="http://lorempixel.com/120/120/nature/1" alt="Beispielbild">
</figure>
<section>
<h3>Muhammad Ali</h3>
<p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
</section>
</article>
<article class="card">
<figure>
<img src="http://lorempixel.com/120/120/nature/2" alt="Beispielbild">
</figure>
<section>
<h3>Helmut Schmidt</h3>
<p>Sicheres Auftreten bei völliger Ahnungslosigkeit.</p>
</section>
</article>
<article class="card">
<figure>
<img src="http://lorempixel.com/120/120/nature/5" alt="Beispielbild">
</figure>
<section>
<h3>Paul Breitner</h3>
<p>Paul Breitner: Da kam dann das Elfmeterschießen. Wir hatten alle die Hosen voll, aber bei mir lief's ganz flüssig.</p>
</section>
</article>
<article class="card">
<figure>
<img src="http://lorempixel.com/120/120/nature/10" alt="Beispielbild">
</figure>
<section>
<h3>Willi "Ente" Lippens</h3>
<p>Schiri zeigt gelb und sagt: "Ich verwarne Ihnen!". Ente: "Ich danke Sie!". Schiri zeigt rot.</p>
</section>
</article>
<article class="card">
<figure>
<img src="http://lorempixel.com/120/120/nature/3" alt="Beispielbild">
</figure>
<section>
<h3>The Big Bang Theory</h3>
<p>Penny: "Darf ich dir eine Frage stellen?" Sheldon: "Angesichts deiner minderwertigen Schulbildung rate ich dir, mir so viele Fragen wie möglich zu stellen."</p>
</section>
</article>
<article class="card">
<figure>
<img src="http://lorempixel.com/120/120/nature/8" alt="Beispielbild">
</figure>
<section>
<h3>Ausrede</h3>
<p>Die Aufgabe war mir zu einfach, da hab' ich eine schwerere angefangen, aber die konnte ich dann nicht lösen.</p>
</section>
</article>
<article class="card">
<figure>
<img src="http://lorempixel.com/120/120/nature/7" alt="Beispielbild">
</figure>
<section>
<h3>Han Solo</h3>
<p>Ohne weitere weibliche Ratschläge müssten wir es eigentlich schaffen, hier wieder lebend raus zukommen</p>
</section>
</article>
</section>dieses CSS verwenden:
/*.cards*/
@media all {
.cards {
background-color: #CFD6DC;
padding: 0.5rem;
}
}
@media only screen and (min-width: 1000px) {
.cards {
display: flex;
flex-wrap: wrap;
}
}
/*card*/
@media all {
.card {
background-color: gold;
box-shadow: -5px 5px 5px hsla(0, 0%, 50%, 0.5);
padding: 0rem 1rem 1rem 0rem;
margin: 1rem 0.5rem 1rem 0.5rem;
display: flex;
}
.card figure {
margin-top: 1rem;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 8rem;
display: flex;
justify-content: center;
align-items: center;
}
.card img {
border-radius: 0.5rem;
}
.card>p {
color: white;
font-size: 4rem;
padding: 0rem 2rem;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
.card section {
background-color: white;
padding: 0.5rem 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1rem;
}
}
@media only screen and (min-width: 1000px) {
.card {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(50% - 1rem - 0px - 1rem);
}
}
@media only screen and (min-width: 1400px) {
.card {
flex-basis: calc(33.33% - 1rem - 0px - 1rem);
}
}
/*card background*/
@media all {
.card:nth-child(4n+1) {
background-image: linear-gradient(
180deg,
#7E7C7D,
#736E6F
);
}
.card:nth-child(4n+1) h3 {
color: #736E6F;
}
.card:nth-child(4n+2) {
background-image: linear-gradient(
180deg,
#1FDBAB,
#04D7A0
);
}
.card:nth-child(4n+2) h3 {
color: #04D7A0;
}
.card:nth-child(4n+3) {
background-image: linear-gradient(
180deg,
#F1597F,
#F14871
);
}
.card:nth-child(4n+3) h3 {
color: #F14871;
}
.card:nth-child(4n+4) {
background-image: linear-gradient(
180deg,
#FBCE58,
#FAC22F
);
}
.card:nth-child(4n+4) h3 {
color: #FAC22F;
}
}Und ein Beispiel direkt zum Ausprobieren:
Gruss
MrMurphy
Danke,
jetzt komm ich der Sache näher.