CSS：包含与水平规则对齐的块的多列布局
Posted
技术标签:
【中文标题】CSS：包含与水平规则对齐的块的多列布局【英文标题】：CSS: multi-column layout containing blocks aligned to a horizontal rule 【发布时间】：2013-11-13 04:38:59 【问题描述】：我正在尝试为以下布局创建 CSS。这与表格非常相似，但我使用它来呈现不包含表格数据的 XML。
我想要两列或更多列以及一条或多条横穿这些列的横线（不可见线）。规则之间的垂直间距与表格的行高完全一样，由该行单元格中内容的最大高度决定。
此“表格”中的所有“单元格”都包含两个可选块。上部块在上部规则下方对齐。较低的块在较低的规则上方对齐。这是一个插图：
上面和下面的块都是可选的，所以每个“单元格”都将具有以下配置之一。块没有固定的高度；它们可能包含根据“单元格”的宽度换行的文本。
因为这很像一张桌子，所以我尝试用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 模式会更好吗？ （在这种情况下，我的丑陋解决方案可能不会那么糟糕。）
【问题讨论】：
我认为，类似表格的结构将是做到这一点的唯一方法。对于对齐效果，您需要单元格和rowspan 尽管我不确定在没有实际 <table> 元素的情况下是否可以做到这一点？这个问题似乎暗示：CSS - rowspan like effect（答案中的position: absolute 解决方法是丑陋的IMO）
我怀疑类似行跨度的效果不起作用。看到这个example。
这个例子在我的浏览器中看起来不错，也许我没有发现问题？
该示例使用了丑陋的解决方法。它显示了我不知道如何处理行跨度的事情。
这里是一个经典的table 和行跨度示例：jsfiddle.net/953an 这可能是table 功能无法与其他元素和 CSS 完全复制的情况（尽管丑陋的路线使用position: absolute 可能不会那么难看，这取决于您的实际用例是什么 - 它唯一真正的错误是如果内容太大，它们会开始重叠）
【参考方案1】：
您不必使用表格。试试这个（仅在 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>
【讨论】：
感谢您的想法。不幸的是，这不会自动调整水平规则之间的垂直空间。如果解决方案中的“4”或“5”跨度太大，它们会重叠。以上是关于CSS：包含与水平规则对齐的块的多列布局的主要内容，如果未能解决你的问题，请参考以下文章