Hallo,
ich habe eine Frage zum Erstellen eines Grid Layouts. Ich habe hier ein Problem mit der Anordnung einiger Bilder.
Ich habe dazu folgendes Layout erstellt (s. Anhang)
html-seminar.de/woltlab/attachment/2866/
Ich möchte gerne in die grünen Felder 2 kleine Fotos einfügen und ein größeres daneben im gelben Bereich. Leider wird das Foto 3 aber unter dem Foto 2 angeordnet, obwohl ich andere Spalten angegeben habe. Kann mir jemand sagen, was ich hier falsch mache. Ich komme nicht auf die Lösung.
Die CSS Datei:
Spoiler anzeigen
main{
grid-column-start:2;
grid-column-end:5;
grid-row-start:3;
grid-row-end:7;
}
.main_text {
grid-column-start:2;
grid-column-end:5;
grid-row-start:3;
grid-row-end:4;
}
.bilder1{
grid-column-start:2;
grid-column-end:3;
grid-row-start:4;
grid-row-end:7;
width:10%;
}
.main_bilder {
grid-column-start:3;
grid-column-end:5;
grid-row-start:4;
grid-row-end:7;
}
.mainside1{
grid-column-start:1;
grid-column-end:2;
grid-row-start:3;
grid-row-end:7;
margin-left: 10px;
margin-right: 10px;
text-align: center;
padding: 0px 10px 10px 10px
}
.mainside2{
grid-column-start:5;
grid-column-end:6;
grid-row-start:3;
grid-row-end:7;
}
Der dazugehörige HTML code:
Spoiler anzeigen
<div class="inhalt">
<p class="main_text">Lorem ipsum doloram voluptua. At vero et.</p>
<div class="bilder1">
<img class="bild1" src="images/bild1.jpg" alt="">
<img class="bild1" src="images/bild2.jpg" alt="">
</div>
<div class="main_bilder">
<img class="bild2" src="images/main.jpg" alt="">
</div>
</div>
Vielen Dank
Markus