CSS：包含與水平規則對齊的塊的多列布局

Question

我正在嘗試為以下布局創建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>並<block-wrapper>的第一個子節點和包裝器的最后一個子節點定義單獨的樣式。

第一個孩子在頂部對齊單元格內容並隱藏<bottom>塊。 最后一個孩子在底部對齊單元格內容並隱藏<top>塊。

我使用position:absolute來使兩個渲染表完全重疊。

這是這個想法的實現。

問題

有沒有更好的方法呢？
我讀過很多關於表和CSS的爭論。 display:table是一種聰明的方法嗎？
有沒有辦法使用我原來的XML模式？
我希望能夠只分發XML文檔，而CSS用戶可以在瀏覽器中查看它。 但是，最好是插入XML轉換步驟，以創建更容易使用CSS呈現的中間XML模式嗎？ （在這種情況下，我丑陋的解決方案可能不會那么糟糕。）

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

CSS：包含與水平規則對齊的塊的多列布局

問題描述

1 個解決方案

解決方案1
0 2013-11-03 11:55:44

CSS：包含與水平規則對齊的塊的多列布局

問題描述

1 個解決方案

解決方案1 0 2013-11-03 11:55:44

解決方案1
0 2013-11-03 11:55:44