Zwei Border

[Rolf b]

Also da finde ich Gunnars Lösung besser. Sie hat den Vorteil, dass die Streifen sich ordentlich rechtsbündig an den Rand stapeln und keine russischen Container-Püppchen erzeugen. Ich hatte diese Idee auch schon, war aber unsicher, ob das im Sinne der Separation Of Concerns ist und habe sie nicht weiter verfolgt. Eine stapelfähige reine CSS Lösung habe ich nicht gefunden.

In der praktischen Umsetzung kann man (bei meinem Probieren in Chrome zumindest) auf Gunnars float:right verzichten, das macht schon der display:flex richtig, und als Fallback für unFlexible Browser reicht der float nicht (hat zumindest bei mir nicht funktioniert). Mit float und variabler Höhe habe ich es nicht hinbekommen.

Ob man nun Class-Namen an das article Element schraubt oder pro Streifen eine x-tag Zeile einfügt, sollte relativ egal sein. Wenn man es unbedingt mit Klassen im article steuern will oder muss, na gut, dann hängt man halt pro Streifenfarbe ein x-tag konstant in das Artikel-Template, styled es auf display:none oder width:0 und aktiviert es mit article.inland x-tag als CSS Selektor. Ist nur eine Menge Overhead...

Rolf