css - 堆叠和在多列、多行中

Question

有没有可能得到这个样子

从这段代码（使用CSS？）

<dl>
<dt>Latitude</dt>
<dd>50.0</dd>
<dt>Longitude</dt>
<dd>100.0</dd>
<dt>h (metres)</dt>
<dd>0.000</dd>
<dt>Vφ (mm/y)</dt>
<dd>-6.4</dd>
<dt>Vλ (mm/y)</dt>
<dd>-15.3</dd>
<dt>Vh (mm/y)</dt>
<dd>-2.0</dd>
</dl>

为了清楚起见，我不在乎颜色。将 dt/dd 对与多列和多行堆叠在一起对我来说很重要。我可以通过表格获得我想要的外观，但它不符合我的可访问性标准。我认为 a 在语义上更接近我想要的......它实际上是一个键/值对列表。

以下是我正在使用的颜色：

dl {border: 1px solid #C8C8C8;}

dd {border: 1px solid #C8C8C8; background-color: #F0F0F0;}

Answer 1

表本身并没有什么不可访问的地方。只有当它们用于显示而不是用于表达表格数据时，它才是一个问题。您确实有表格数据，它恰好有 2 列。仅仅因为它是一个 2 列 6 行表并不意味着它必须看起来像一个。

http://jsfiddle.net/hgWxT/

table, tbody {
    display: block;
}

tr {
    display: inline-block;
    width: 30%;
}

td, th {
    display: block;
}

<table>
    <tr>
        <th>Latitude</th>
        <td>50.0</td>
    </tr>

    <tr>
        <th>Longitude</th>
        <td>100.0</td>
    </tr>

    <tr>
        <th>h (metres)</th>
        <td>0.000</td>
    </tr>

    <tr>
        <th>Vf (mm/y)</th>
        <td>-6.4</td>
    </tr>

    <tr>
        <th>V? (mm/y)</th>
        <td>-15.3</td>
    </tr>

    <tr>
        <th>Vh (mm/y)</th>
        <td>-2.0</td>
    </tr>
</table>

Answer 2

这是一个基本的解决方案，看起来很糟糕，但是使用这种结构，您应该能够根据您的要求对其进行改进：

小提琴

CSS：

dl {
    float: left;
    display: block;
    width: 400px;
}

dl dd {
    float: left;
    margin-left: -35px;
    margin-top: 20px;
    width. 100px;
    background-color: #e0e0e0;
    border: 1px solid #777777;
    padding: 5px;
    position: relative;
    display: block;
}
dl dt {
    float: left;
    width. 70px;
    position: relative;
    display: block;
}

Answer 3

是的，这是可能的。Andy Clark 喜欢使用各种列表，我已经多次使用 dl。

您只需将其视为 ol/ul。首先删除边距/填充。

为 dt 分配一个类，使它们浮动，但您必须为第二行分配一个不同的类。有时好像没有设置 DL 容器的宽度，dt 会环绕，但要真正控制 dt 的第二行（V (mm/y) 和 -6.4 .. 那行），您可以分配另一个类和风格。

Answer 4

可能的？是的，但不必要的困难。

远，远，更容易的是将每个dt/dd组包装在一个元素中，并相应地设置样式。这是您完成的示例： http: //cssdeck.com/labs/jsqdknho