Question

我正在努力了解以下信息的正确标记

这将是葡萄酒的规格清单：

土壤：固体是石灰石和粘土的混合物......
appelation ：st。美浓
葡萄树下面积：7.3公顷
葡萄品种：
- merlot ：50％
- cabernet franc ：50％
老化：在新橡木桶中陈酿24个月
顶级年份：
- 1929
- ...
- 2009
酒窖价值图表重新定位：<img src="..."/>

所以我首先想到：如果每个项目都是规范section中的section，那么这看起来很不错但是它看起来不是一个部分，因为它基本上由{组成{1}}对。

所以我已经改变了定义列表key:value，它将有一些定义术语和少数具有多个定义的项目。它在标记方面看起来不错，但如果你需要一个 block / flow 元素来定义其中一个定义并将它们并排浮动，那么就无法正确设置样式。

类似的东西：

how the items should be displayed

然后我发现我也可以使用无序列表，但我不确定这是否是一个好的标记，因为它实际上必须为每个列表项创建一个标题和它们将其值插入一个后续段落（对我来说太过分了）

所以也许是一张桌子？......在这些可用的选项之后我感到有点困惑，这让我觉得更舒服但仍然是次<dl>的替代选择，但我不确定这是不是这是一个很好的标记，因为我对部分的印象是，在某些情况下，它们将包含的内容多于单行。

如果有人可以在这里提供关于如何使其在干净标记上工作但同时考虑可访问性的帮助，那就太棒了：）

提前致谢

Answer 1

最常见的事情是定义列表，在<dd>标签中有“葡萄品种”和“顶级年份”的其他较小的列表。但是，您说您的样式有问题。如果您可以提供有关您希望如何设计样式的更多信息，以及为什么您不能使用CSS这样做，那么人们可能会帮助您解决这个问题。

Answer 2

好的，现在我明白你的问题。我不知道这是否足以满足您的需求，但我已经能够实现这一结果（适用于FF / Chrome / IE8）：

我的方法存在的问题是：

您需要手动设置dl的高度
横向规则不灵活且附加到dts（你可以通过正确使用边距和填充来解决这个问题;
如果您希望每个行都有不同的高度，则需要将css类分配给每行中至少一个dt标记（参见帖子的下端）。

如您所见，我的标记非常简单。然而，css并没有那么多。此外，这种方法是简约风格，并不是非常灵活（请注意，我没有使用任何边距/填充使其看起来更好）：

dl.winelist {
background-color: #fdd;
width: 600px;
height: 452px; /* 3 * 150px boxes + 2 * 1px border */
border: 1px solid #000;
}

dl.winelist dt {
width: 200px; /* definition for normal boxes */
height: 150px;
float: left;
font-weight: bold;
background-color: #070;
margin: 0;
border-top: 1px solid #000;
}

dl.winelist dt:first-child {
border-top: 0 /* only show those lines <i>between</i> the boxes */
}

dl.winelist dd {
font-style: italic;
background-color: #770;
margin: 30px 0 0; /* dd gets positioned 30px below the origin of dt */
width: 200px;
float: left;
margin-left: -200px; /* could combine that with margin statement above */
}

dl.winelist dt.triple {
width: 600px;
}

dl.winelist dt.triple + dd {
width: 600px;
margin-left: -600px;
}

dl.winelist ul {
list-style: none; /* you can freely style the ul, it won't actually break anything */
margin: 0;
padding: 0;
}

如果您不想将三重类用于土壤事物，您甚至可以使用:first-child代替.triple

如果您可以为每个<dt>元素分配一个类（例如，称谓区域，则可以为每个行设置不同的高度值（从dl.winelist dt移除高度）：

dt.appelation, dt.aging {
clear: left;
}

dt.soil {
height: 150px;
}

dt.appelation {
height: 120px;
}

dt.aging {
height: 240px;
}

完全不同的方法是在dl上使用position: relative，并根据各自的类别定位成员absolute。

Answer 3

这是@ 经销商解决方案的幻灯片修改。

您无需设置 dl 高度。
每个 dd 可以是不同的，而不是固定的高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Информация за вино</title>

    <style type="text/css">
    .wine-description
    {
        font-family: sans-serif;
        font-size: 12px;
        background-color: #efece7;

        width: 600px;
        padding: 5px 20px 10px;
    }

    .wine-description:after
    {
        clear: both;
        height: 0;
        display: block;
        visibility: hidden;
        content: ".";
    }

    .wine-description dt
    {
        color: #908f8c;

        font-size: 120%;
        font-weight: bold;
        text-transform: uppercase;

        float:left;
        width: 200px;

        padding: 5px 0;
        border-top: 1px solid #fff;
    }

    .wine-description dt.wine-soil
    {
        border-top-width: 0px;
        width: 100%;
    }

    .wine-description dd
    {
        color: #98676d;

        float: left;
        width: 195px; /* +5px padding-right = 200px; */

        margin: 30px 0 0 -200px;
        padding: 0 5px 25px 0;
    }

    .wine-description dt.wine-soil + dd
    {
        margin: 0 0 10px;
        width: 100%;
    }

    .clear
    {
        clear: left;
    }
    </style>
</head>

<body>
    <dl class="wine-description">
        <dt class="wine-soil">Soil</dt>
        <dd>The soil is a mixture of limestone and clay, becoming sandier on the lower reaches where the grapes exhibit slidhtly lower accidity.</dd>

        <dd class="clear">&nbsp;</dd>

        <dt>Apellation</dt>
        <dd>St. Emillion</dd>

        <dt>Area under vine</dt>
        <dd>7.3 Hectares</dd>

        <dt>Anual production</dt>
        <dd>2200 Cases per annum</dd>

        <dd class="clear">&nbsp;</dd>

        <dt>Grape vrieties</dt>
        <dd>Merlot (50%)<br />Cabernet Franc (50%)</dd>

        <dt>Ageing</dt>
        <dd>Aged in new oak barrels for 24-27 months</dd>

        <dt>Top vintages</dt>
        <dd>1929, 1979, 1982, 1995, 1996, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006</dd>
    </dl>
</body>
</html>

HTML5标记用于规范列表

3 个答案: