使用可变宽度<dt>和</dt> <dd>创建定义LIst（包括JSFiddle）</dd>

Question

我有一个定义列表，其中术语和定义的宽度各不相同。 [编辑：澄清一下，当我说宽度变化时，我的意思是它们不能是固定的宽度。显然，通过设置“'] 的宽度可以很容易地实现这种效果。我需要将每一对并排放置，必要时变为多线，而不是在下面包裹。

这是一个显示我的问题的JSFiddle：http://jsfiddle.net/2H9YN/（下面的代码）

[编辑：请注意，颜色仅供参考。它们对最终设计并不重要]

我目前有这个：

但我想要这个：

HTML：

<dl>
    <dt>dt: Lorem Ipsum</dt>
    <dd>dd: Lorem imperdiet </dd>
    <dt>dt: Lorem id libero in Ipsum</dt>
    <dd>dd: Lorem id libero in ipsum dolor </dd>
    <dt>dt: Lorem Ipsum</dt>
    <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd>
    <dt>dt: Lorem id libero in Ipsum</dt>
    <dd>dd: Lorem in ipsum dolor </dd>
</dl>

CSS：

dl
{
    width:400px;
    background-color: rgba(0, 0, 0, 0.2);
    float: left;
}

dt
{
    clear:both;
    float:left;
    background-color: rgba(255, 0, 0, 0.3);
}

dd
{
    float:left;
    background-color: rgba(0, 255, 0, 0.3);
    margin: 0 0 0 4px;
}

基本上我正在寻找<dd>来填充<dt>留给它的空间，如果这意味着它需要包裹，它会包裹在自身下方，而不是在相邻的{{ 1}}。

Answer 1

以下是一些可行的CSS：

dl {
    width: 400px;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: auto;
}

dt {
    background-color: rgba(255, 0, 0, 0.3);
    float: left;
    clear: left;
    margin-right: 10px; /* Margin work */
    padding: 5px; /* Padding works */
}
dd {
    background-color: rgba(0, 255, 0, 0.3);
    display: table-cell;
    padding-left: 10px; /* Padding works */
    padding-bottom: 10px;
    margin-left: 100px; /* Margin does not work */
    margin-bottom: 100px;
}

小提琴参考：http://jsfiddle.net/audetwebdesign/45jDK/

解释其工作原理

（1）要查看背景颜色，请为overflow: auto设置dl。由于所有子元素都是浮动的，因此默认情况下高度会折叠为零。

（2）您希望dt从新行开始，因此请使用clear: left，以便dt不会尝试在短dd元素之后流动。< / p>

（3）对于dd，使用display: table-cell似乎可以解决问题。

在dt上，padding和margin按预期工作。在dd，padding有效但margin无效，可能是因为table-cell的工作原理。

我在Firefox中试过这个，但没有其他地方。

<强> PS
我在其中一个dt元素上添加了一些额外的内容，以了解极端情况如何呈现。我还尝试width dl，布局保持稳定。

Answer 2

您正在使用定义列表这一事实使得这非常棘手。没有某种容器来强制执行dt和dd之间的关系，你必须在某处设置限制。

我最接近你的标记可以在Opera中使用，但由于Flexbox实现的不同而不能使用Chrome：

http://jsfiddle.net/2H9YN/4/

dl {
  width: 400px;
  background-color: rgba(0, 0, 0, 0.2);
  float: left;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

dt {
  background-color: rgba(255, 0, 0, 0.3);
  -webkit-flex: 0 0;
  -ms-flex: 0 0;
  flex: 0 0;
  white-space: pre;
}

dd {
  background-color: rgba(0, 255, 0, 0.3);
  margin: 0 0 0 4px;
  -webkit-flex: 1 1 50%;
  -ms-flex: 1 1 50%;
  flex: 1 1 50%;
}

当然，只有每d d的时间不超过1 dd才有效。

如果您愿意更改标记以便拥有某种行容器，那么您有更多选择。它不必是一个表，它可以是一堆包含h1（dt）和段落（dd）的文章。标签无关紧要，只是元素如何组合在一起。

<table>
    <tr>
        <th>dt: Lorem Ipsum</th>
        <td>dd: Lorem imperdiet </td>
    </tr>

    <tr>
        <th>dt: Lorem id libero in Ipsum</th>
        <td>dd: Lorem id libero in ipsum dolor </td>
    </tr>

    <tr>
        <th>dt: Lorem Ipsum</th>
        <td>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</td>
    </tr>
</table>

再次使用Flexbox，当元素没有足够的内容到达目的地时，我们可以在你的灰色背景下进行完美匹配。我们还可以为非Flexbox浏览器获得合理的回退：

http://jsfiddle.net/2H9YN/7/

table {
  width: 400px;
  background-color: rgba(0, 0, 0, 0.2);
}

table, tbody, th, td {
  display: block;
}

tr {
  display: block;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

th, td {
  display: table-cell;
  vertical-align: text-top;
}

th {
  background-color: rgba(255, 0, 0, 0.3);
  white-space: pre;
  font-weight: normal;
}

td {
  background-color: rgba(0, 255, 0, 0.3);
  margin: 0 0 0 4px;
}