Liste der Anhänge anzeigen (Anzahl: 1)
CSS grid Spalten Problem
Hallo,
ich steh da grad an einem CSS-Problem, das ich mir so nicht erklären kann:
HTML-Code:
<div class="teaserbox onetwo">
<div class="textbox">...inhalt...</div>
<div class="imagebox">...bild...</div>
</div>
HTML-Code:
<div class="teaserbox twoone">
<div class="textbox">...inhalt...</div>
<div class="imagebox">...bild...</div>
</div>
Code:
.teaserbox {
display: grid;
grid-template-rows: 300px;
grid-template-areas: "colone coltwo";
&.onetwo {
grid-template-columns: 1fr 2fr;
.textbox {
grid-column: 1 / 2;
}
.imagebox {
grid-column: 2 / 3;
}
}
&.twoone {
grid-template-columns: 2fr 1fr;
.textbox {
grid-column: 2 / 3;
}
.imagebox {
grid-column: 1 / 2;
}
}
}
Mit der Klassenkombination .teaserbox.onetwo wird mir
links der Text in der schmalen Spalte und rechts das Bild in der breiten Spalte angezeigt
Die Klassenkombination .teaserbox.twoone funktioniert jedoch nicht - da rutscht die linke Spalte nun unter die eigentliche Höhe auf 0px
https://community.contao.org/de/atta...9&d=1677691176
Gebe ich der .imagebox eine Höhe mit, dann macht das Bild nach unten auf
Wenn ich das HTML dann so anpasse, dass ich .textbox und .imagebox von der Platzierung her austausche, dann funktioniert .teaserbox.twoone aber .teaserbox.onetwo nicht mehr.
Ich denke, dass ich im CSS irgendwo eine Deklaration vergesse - aber nur welche :o
Danke für die Hilfestellung
