6

我正在尝试为以下布局创建 CSS。这与表格非常相似，但我使用它来呈现不包含表格数据的 XML。

我想要两列或更多列以及一条或多条贯穿这些列的水平线（不可见线）。规则之间的垂直间距与表格的行高完全一样，由该行单元格中内容的最大高度决定。

此“表”中的所有“单元格”都包含两个可选块。上部块在上部规则下方对齐。较低的块在较低的规则上方对齐。这是一个插图：

CSS 目标

上面和下面的块都是可选的，因此每个“单元格”将具有以下配置之一。块没有固定的高度；它们可能包含根据“单元格”的宽度换行的文本。

一切可能

因为这很像一张桌子，所以我尝试使用display:table. 第一个问题：如何在一个单一的内部创建上块和下块table-cell？这是我的第一次尝试。

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

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用来使两个渲染表完全重叠。

这是这个想法的一个实现。

问题

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

1 回答 1

0

您不必使用表格。试试这个（仅在 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-03T11:55:44.777 回答