Hallo Matthias,

mich deucht, du diskutierst an Siegfrieds Frage vorbei.

Hallo Siegfried,

ich spiegele zunächst mein Verständnis der Sache und lasse die Technik erstmal weg. Denn mir scheint, als wäre dein Ansinnen ganz durchdacht – aber das kann ein Irrtum sein, ich kenne deine Seite nicht.

Du hast vereinfacht gesagt dieses HTML:

<p>1111111</p>
<p>2222222<br>2222222</p>
<p>3333333<br>3333333<br>3333333</p>
<p>4444444</p>
<p>5555555<br>5555555</p>

Schmal soll das alles untereinander, so weit, so einfach. Aber in der Breitdarstellung willst Du in etwa so etwas?

3333333  1111111
3333333  
3333333  2222222
         2222222
5555555  
5555555  4444444

Ich wüsste tatsächlich erstmal nicht, wie man das mit CSS lösen könnte, vor allem, wenn die Spaltenverteilung natürlich aussehen soll. Dafür ist eigentlich die columns-Eigenschaft vorgesehen, die hier aber nicht verwendbar ist, weil man damit die Inhalte nicht umsortieren kann.

Umsortieren geht bei Flexbox mit order, ABER bei Flexbox gibt's keinen von Browsern implementierten Weg, einen Wrap-Umbruch zu erzwingen. Dafür bräuchte es wrap-before/wrap-after, die zwar in der CSS Text 4 Spezifikation stehen, aber nirgends implementiert sind.

Grid-Layout erlaubt eine bessere Steuerung der Anordnung, hat aber das Problem, dass alle Paragraphen Absätze in Grid-Zellen einsortiert werden und keine natürliche Spaltenanordnung erfolgt. Mit Grid wäre dies möglich:

3333333  1111111
3333333  
3333333

5555555  2222222
5555555  2222222
 
         4444444

und ich nehme an, dass Du DAS nicht willst. Mit Masonry-Layout könnte man das verbessern, jedoch ist das ebenfalls nur in Safari und Firefox experimentell enthalten, in Chromia gar nicht.

Aber was ist der Grund für deine Wunschanordnung? Das müsstest Du erklären, denn außer "Siegfried WILL diesen Drachen unbedingt erlegen" gibt es für uns keine Notwendigkeit dafür. Spaltenlayout mit columns, wie Matthias schon angerissen hat, würde Dir dies hier ermöglichen:

1111111  3333333
         
2222222  4444444
2222222  
         5555555
3333333  5555555
3333333  

Ja, mir ist bewusst, dass hier eine Witwe hinterlassen wurde (früher auch Hurenkind genannt), aber wenn die Absätze länger sind, ist die Chance dafür geringer und man kann das mit den CSS-Eigenschaften widows und orphans auch steuern.

Rolf