2-Spaltenlayout mit einigen Linien
bearbeitet von TSHello,
> @@Matthias Scharwies
>
> > ~~~ html,bad
> > <header>
> > <h1>Mails schreiben</h1>
> > ...
> > </header>
> > <section>
> > <h1>unverschlüsselte Mails</h1>
> > </section>
> > <section>
> > <h1>verschlüsselte Mails</h1>
> > </section>
> > ~~~
>
> Die Überschriften in den `section`s müssen `h2`{:.good} sein.
>
>
>
> > Besser wäre es, die 2-Spaltigkeit mit [media queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries) aber erst ab einer gewissen Breite einzurichten, da diese auf Handys blöd aussieht.
>
> Noch besser wäre, das [ohne media queries](https://codepen.io/gunnarbittersmann/pen/ormqzL) 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 Ansä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
--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.