4

我有一个定义列表，其中术语和定义的宽度都不同。[编辑：澄清一下，当我说不同的宽度时，我的意思是它们不能是固定的宽度。显然，通过设置 `'] 的宽度很容易实现这种效果]我需要每对并排放置，如果需要，可以变成多行，而不是在 .

这是一个显示我的问题的 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><dt>

4

2 回答 2

3

以下是一些可能有效的 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元素之后流动。

(3) 对于dd, usingdisplay: table-cell似乎可以解决问题。

上dt，padding并按margin预期工作。On dd,padding工作但margin没有效果，可能是因为table-cell工作方式。

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

PS
我在其中一个元素上添加了一些额外的内容，dt以查看极端情况将如何呈现。我还尝试了widthofdl并且布局保持稳定。

于 2013-03-16T12:39:37.983 回答
2

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

由于 Flexbox 实现的差异，我可以在 Opera 中使用您的标记在 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%;
}

当然，只有在每个 dt 的 dd 数不超过 1 时才有效。

如果您愿意更改标记以便拥有某种行容器，那么您有更多选择。它不一定是一个表格，它可以是一堆包含一个 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;
}
于 2013-03-16T14:29:56.083 回答