CSS:包含与水平规则对齐的块的多列布局

Question

CSS:包含与水平规则对齐的块的多列布局

dlh*_*dlh 5 html css xml css-tables

我正在尝试为以下布局创建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>

Run Code Online (Sandbox Code Playgroud)

在试图让它工作时,我一直在尝试修改我原来的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>

Run Code Online (Sandbox Code Playgroud)

一个非常难看的解决方案

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

第一个孩子在顶部对齐细胞内容并隐藏<bottom>块.最后一个孩子在底部对齐单元格内容并隐藏<top>块.

我position:absolute用来使两个渲染表完全重叠.

这是这个想法的实现.

问题

有没有更好的方法呢？
我读过很多关于表和CSS的争论.是display:table一种聪明的方法吗？
有没有办法使用我原来的XML模式？
我希望能够只分发XML文档,而CSS用户可以在浏览器中查看它.但是,最好是插入XML转换步骤,以创建更容易使用CSS呈现的中间XML模式吗？(在这种情况下,我丑陋的解决方案可能不会那么糟糕.)

Answer 1

res*_*ned 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，4 月前
查看次数：	1047 次
最近记录：	12 年，3 月前