CSS3 Colums/Spalten Test

<p> 4 Spalten 900px noch 3, dann 2 und 1

Dies ist ein echt bescheuerter Text, der nur irgendwie den Platz hier ausfüllen soll. Was aber ist, wenn der Text keine Lust mehr hat ständig nur Platzhalter zu sein, sondern nach Höherem strebt? Was ist dann? Dann, ja dann kommt ein neuer Absatz und der Text schaut in die Röhre. Hier steht nur son blöder Textbaustein rum. Der langweilt sich und langweilt sich und weiß nicht was er alles tun soll. Ist er doch schliesslich nur ein Platzhalter bis das wirklich wichtige Zeug daherkommt, das sich noch einer aus den Fingern saugen muss.

<p> 3 Spalten 680px noch 2 , 480px noch 1

Dies ist ein echt bescheuerter Text, der nur irgendwie den Platz hier ausfüllen soll. Was aber ist, wenn der Text keine Lust mehr hat ständig nur Platzhalter zu sein, sondern nach Höherem strebt? Was ist dann? Dann, ja dann kommt ein neuer Absatz und der Text schaut in die Röhre. Hier steht nur son blöder Textbaustein rum. Der langweilt sich und langweilt sich und weiß nicht was er alles tun soll. Ist er doch schliesslich nur ein Platzhalter bis das wirklich wichtige Zeug daherkommt, das sich noch einer aus den Fingern saugen muss.

<div> 2 Spalten bei 680px nur noch 1, mit column-span

Dies ist ein echt bescheuerter Text, der nur irgendwie den Platz hier ausfüllen soll. Was aber ist, wenn der Text keine Lust mehr hat ständig nur Platzhalter zu sein, sondern nach Höherem strebt? Was ist dann? Dann, ja dann kommt ein neuer Absatz und der Text schaut in die Röhre.

Überschrift H3 unterbricht das Spaltenlayout und spannt über alle Spalten

Hier steht nur son blöder Textbaustein rum. Der langweilt sich und langweilt sich und weiß nicht was er alles tun soll. Ist er doch schliesslich nur ein Platzhalter bis das wirklich wichtige Zeug daherkommt, das sich noch einer aus den Fingern saugen muss.

<ul> 3 Spalten ohne column-rule, 900px 2, dann 1

  • 1. Was ist dann?
  • 2. aus den Fingern saugen muss
  • 3. Ist er doch schliesslich nur ein Platzhalter bis das
  • 4. aus den Fingern saugen muss Fingern saugen muss Fingern saugen muss
  • 5. aus den Fingern saugen muss
  • 6. aus den Fingern saugen muss
  • 7. aus den Fingern saugen muss
  • 8. aus den Fingern saugen muss
  • 9. aus den Fingern saugen muss

Vorteile:

  • CSS3 einfache Spaltendarstellung für Absätze und Listen

Nachteile:

  • Browser Support? Geht nicht kleiner IE10,
  • FF kommt mit column-span nicht klar! Bekannter BUG!

Fazit:

  • Kann man schon machen.