CSS：包含与水平线对齐的块的多列布局

我正在尝试为以下布局创建CSS。这与表非常相似，但是我使用它来呈现不包含表格数据的XML。CSS：包含与水平线对齐的块的多列布局

我想要两列或更多列和一列或多列水平线（不可见线）贯穿这些列。规则之间的垂直空间与表格的行高完全相同，取决于该行单元格中内容的最大高度。

此“表”中的所有“单元格”包含两个可选块。上部块对齐在上部规则下方。下面的块与下面的规则对齐。下面是一个例证：

CSS goal

的上方和下方的块都是可选的，所以每个“小区”将具有以下结构中的一种。块没有固定的高度;它们可能包含取决于“单元格”宽度的文本。

All possible "cell" configurations

由于这多么像一个表，我试图与display:table渲染它。第一个问题：如何在一个table-cell内创建上下两个块？这是我的first attempt。

我认为这相当于“浮动”在其容器底部的块的问题。 this question的接受答案表明这可能是不可能的。

XML片段

这里是XML我想要呈现的简化样品。

<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>

在试图让这个工作，我一直在试验对我原来的XML模式的修改。在第二个XML示例中，我不是按照相邻的水平线规则进行分组，而是按行更多地进行“表”式分组。在翻译中，<above-rule>变成<cell-bottom>而<below-rule>变成<cell-top>。我更喜欢原来的那个，但是我已经在这个方面取得了更多进展。

<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>

一个真正丑陋的解决方案

我有一个想法，特别难看。我可以修改我的XML模式，并要求使用完全相同的内容重复两次完整的XML <block>。然后，我将<block>的两个副本放在一个包装器元素<block-wrapper>中，我为包装器的第一个孩子和包装器的最后一个孩子定义了单独的样式。

第一个孩子对齐顶部的单元格内容并隐藏<bottom>块。最后一个孩子对齐底部的单元格内容并隐藏<top>块。我使用position:absolute来使两个呈现的表格完全重叠。

这是implementation of this idea。

问题

是否有这样做的更好的办法？
我读过很多关于表格和CSS的辩论。是display:table一个聪明的做法？
有什么方法可以使用我的原始XML模式？
我希望能够仅分发XML文档，并且具有CSS的用户可以在浏览器中查看它。但是，如果插入一个XML转换步骤来创建一个更容易用CSS呈现的中间XML模式，它会更好吗？（在这种情况下，我的丑陋解决方案可能并不那么糟糕。）

来源

2013-11-01 dlh

我认为，像表结构这样的表是唯一的方法。对于对齐效果，您需要单元格和“rowspan”，尽管我不确定这是否可以在没有实际的“

”元素的情况下完成？这个问题似乎是这样建议的：[CSS - rowspan like effect]（http://stackoverflow.com/q/13585789）（答案中的'position：absolute'解决方法是丑陋的IMO） –

我怀疑一个类似rowspan的效果将无法工作。看到这个[例子]（http://dabblet.com/gist/7272902）。 – dlh

这个例子在我的浏览器中似乎很好看，也许我没有看到问题？ –

回答

您不必使用表格。试试这个（仅在Chrome中测试过）：

<html> 
<head> 
<title>CSS</title> 
</head> 


<style type="text/css"> 
div { 
    float: left; 
    width: 100px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 1px; 
    border-style: solid; 
    visibility: visible; 
    height: 50%; 
    background-color: white; 
    position: relative; 
} 

div div { 
    background-color: grey; 
    z-index: 3; 
} 

div#OUTER { 
    width: 100%; 
    display: block; 
    height: 600px; 
    border: 0; 
} 

span { background-color: white; width: 100%; } 

.line { width: 100%; visibility: visible; z-index: 5; } 
.top { position: absolute; top: 10%; } 
.bottom { position: absolute; bottom: 10%; } 
.red-line { border: solid 2px red; } 
.blue-line { border: solid 2px blue; } 
.top-line { position: absolute; top: 2%; } 
.bottom-line { position: absolute; bottom: 50%; } 
</style> 

<body> 

    <div id="OUTER" style=""> 
     <hr class="line red-line top-line" /> 
     <hr class="line blue-line bottom-line" /> 
     <div> 
      <span class="top">11111<br>111111<br>111111111</span> 
     </div> 
     <div> 
      <span class="bottom">22222</span> 
     </div> 
     <div> 
      <span class="bottom">33333<br>33333<br>33333</span> 
     </div> 
     <div> 
      <span class="top">44444<br>44444<br>4444<br>4444</span> 
      <span class="bottom">55555<br>555555<br>5555<br>5555</span> 
     </div> 
    </div> 
</body> 
</html>

来源

2013-11-03 11:55:44 resigned

感谢您的想法。不幸的是，这不会自动调整水平线之间的垂直距离。如果解决方案中的“4”或“5”跨度过大，则它们会重叠。 – dlh

CSS：包含与水平线对齐的块的多列布局

回答

相关问题