CSS: mehrspaltiges Layout mit Blöcken, die an einer horizontalen Regel ausgerichtet sind

Question

Ich versuche CSS für das folgende Layout zu erstellen. Dies ist einer Tabelle sehr ähnlich, aber ich verwende sie, um XML darzustellen, das keine Tabellendaten enthält.

Ich möchte zwei oder mehr Spalten und eine oder mehrere horizontale Regeln (unsichtbare Linien), die durch diese Spalten laufen. Der vertikale Abstand zwischen den Regeln wird genau wie die Zeilenhöhe einer Tabelle durch die maximale Höhe des Inhalts in den Zellen dieser Zeile bestimmt.

Alle "Zellen" in dieser "Tabelle" enthalten zwei optionale Blöcke. Der obere Block ist unterhalb der oberen Linie ausgerichtet. Der untere Block ist über der unteren Regel ausgerichtet. Hier ist eine Darstellung:

Die ober- und unterhalb Blöcke beide optional sind, so dass jeder „Zelle“ eine der folgenden Konfigurationen haben. Die Blöcke haben keine feste Höhe; Sie können Text enthalten, der abhängig von der Breite der "Zelle" umgebrochen wird.

Da dies so viel wie ein Tisch, versuchte ich es mit display:table Rendering. Erstes Problem: Wie kann ich sowohl obere als auch untere Blöcke in einem einzigen table-cell erstellen? Hier ist meine first attempt.

Ich denke, das ist gleichbedeutend mit dem Problem, einen Block am Boden seines Behälters "schweben". Die angenommene Antwort auf this question schlägt vor, dass dies möglicherweise nicht möglich ist.

XML-Fragment

Hier ist eine vereinfachte Beispiel der XML ich zu machen bin versucht.

<block> 
    <horizontal-rule> 
     <column> 
      <above-rule>When in the Course of human events</above-rule> 
     </column> 
     <column> 
      <above-rule>to dissolve the political bands</above-rule> 
      <below-rule>it becomes necessary for one people</below-rule> 
     </column> 
     <column> 
      <below-rule>which have connected them with another</below-rule> 
     </column> 
    </horizontal-rule> 
</block> 

In dem Versuch, dies zu arbeiten, habe ich mit einer Änderung an meinem ursprünglichen XML-Schema experimentiert. In diesem zweiten XML-Beispiel versuche ich, statt nach der benachbarten horizontalen Regel zu gruppieren, eine "tabellenartige" Gruppierung nach Zeilen. In der Übersetzung wird <above-rule><cell-bottom> und <below-rule> wird <cell-top>. Ich bevorzuge das Original, aber ich habe mehr Fortschritte mit diesem gemacht.

<block> 
    <row> 
     <cell> 
      <cell-bottom>When in the Course of human events</cell-bottom> 
     </cell> 
     <cell> 
      <cell-top>it becomes necessary for one people</cell-top> 
      <cell-bottom>to dissolve the political bands</cell-bottom> 
     </cell> 
     <cell> 
      <cell-top>which have connected them with another</cell-top> 
     </cell> 
    </row> 
</block> 

Eine wirklich hässliche Lösung

ich eine Idee haben, die besonders hässlich ist. Ich kann mein XML-Schema ändern und benötige, dass das gesamte XML zweimal mit exakt demselben Inhalt wiederholt wird. Dann lege ich beide Kopien des in ein Wrapper-Element <block-wrapper> und ich definiere separate Stile für das erste Kind des Wrappers und das letzte Kind des Wrappers.

Das erste Kind richtet den Zellinhalt oben aus und blendet die <bottom> Blöcke aus. Das letzte Kind richtet den Zellinhalt unten aus und blendet die <top> Blöcke aus.

Ich verwende position:absolute, um die beiden gerenderten Tabellen genau überlappen zu lassen.

Hier ist ein implementation of this idea.

Fragen

• Gibt es einen besseren Weg, dies zu tun?
• Ich habe viele Debatten über Tabellen und CSS gelesen. Ist display:table ein kluger Ansatz?
• Gibt es eine Möglichkeit, mein ursprüngliches XML-Schema zu verwenden?
• Ich möchte in der Lage sein, nur das XML-Dokument zu verteilen, und ein Benutzer mit dem CSS kann es in einem Browser anzeigen. Aber wäre es besser, einen XML-Transformationsschritt einzufügen, um ein intermediäres XML-Schema zu erstellen, das einfacher mit CSS gerendert werden kann? (Meine hässliche Lösung ist in diesem Fall möglicherweise nicht so schlecht.)