2-Spaltenlayout mit einigen Linien

[TS]

Hello,

@@Matthias Scharwies

<header>
  <h1>Mails schreiben</h1>
  ...
</header>
<section>
  <h1>unverschlüsselte Mails</h1>
</section>
<section>
  <h1>verschlüsselte Mails</h1>
</section>

Die Überschriften in den sections müssen h2 sein.

Besser wäre es, die 2-Spaltigkeit mit media queries aber erst ab einer gewissen Breite einzurichten, da diese auf Handys blöd aussieht.

Noch besser wäre, das ohne media queries zu tun.

Mir dünkt, dass das die Anforderungen noch nicht trifft. Soweit ich den OP verstanden habe, soll eine Gegenüberstellung vorgenommen werden. Deshalb dachte er sofort an eine Tabelle. Es sollen also bestimmte Absätze miteinander korrespondieren, sozusagen synchronisiert werden. Das funktioniert bei einer Tabelle quasi automatisch.

Was ist aber nun, wenn der Viewport zu schmal wird? Dann muss ich die Tabellenstruktur aufbrechen und die korrespondierenden Absätze kämmen, also erst einige von den "Linken", dann die korrespondierenden von den "Rechten". Damit man die Übersicht behält, hilft Farbe. Dann kommt der nächste Hauptabschnitt und das Spiel wiederholt sich.

Wie baut man nun eine Quasitabelle, die bei Bedarf zur sequentiellen Liste mutiert?

Wenn ich den OP richtig verstanden habe, möge sich bitte melden. :-)

Glück Auf
Tom vom Berg