我正在尝试为以下布局创建 CSS。这与表格非常相似，但我使用它来呈现不包含表格数据的 XML。
我想要两列或多列以及贯穿这些列的一条或多条水平线(不可见线)。规则之间的垂直间距与表格的行高完全一样，由该行单元格中内容的最大高度决定。
此“表格”中的所有“单元格”都包含两个可选 block 。上面的 block 在上面的规则下方对齐。下面的 block 在下面的规则上方对齐。这是一个例子:
上面和下面的 block 都是可选的，因此每个“单元格”都将具有以下配置之一。 block 没有固定的高度；它们可能包含根据“单元格”的宽度换行的文本。
因为这很像一张 table ，所以我尝试用 display:table 渲染它.第一个问题:如何在单个 table-cell 中同时创建上下 block ？这是我的 first attempt .
我认为这相当于在其容器底部“ float ”一个方 block 的问题。 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> block 。最后一个 child 对齐底部的单元格内容并隐藏 <top> block 。
我使用 position:absolute使两个呈现的表格完全重叠。
这是一个 implementation of this idea .
问题
- 有更好的方法吗？
- 我读过很多关于表格和 CSS 的争论。是
display:table一个聪明的方法？ - 有没有办法使用我原来的 XML 模式？
- 我希望能够只分发 XML 文档，并且具有 CSS 的用户可以在浏览器中查看它。但是插入一个 XML 转换步骤来创建一个更容易用 CSS 呈现的中间 XML 模式会更好吗？ (在那种情况下，我丑陋的解决方案可能不会那么糟糕。)
最佳答案
您不必使用表格。试试这个(仅在 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>
关于html - CSS:包含与水平规则对齐的 block 的多列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19735908/