以下是一个基于弹性的解决方案(SCSS):

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  dt {
    width: 150px;
  }
  dd {
    margin: 0;
    flex: 1 0 calc(100% - 150px);
  }
}

适用于以下HTML (pug)

dl
  dt item 1
  dd desc 1
  dt item 2
  dd desc 2

参见jsFiddle演示

我需要一份完全符合项目描述的列表，该列表展示了一家公司的员工，左边是他们的照片，右边是他们的信息。我设法在每个DD之后使用伪元素来完成清理:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

此外，我希望文本只显示在图像的右侧，而不是在浮动图像下进行包装(伪列效果)。这可以通过添加一个带有CSS overflow: hidden;DD标签的内容。您可以省略这个额外的DIV，但是DD标记的内容将被包装在浮动的DT下面。

在使用了一段时间后，我能够支持每个DD的多个DT元素，但不能支持每个DT的多个DD元素。我尝试添加另一个可选类，只在最后一个DD之后清除，但随后的DD元素包装在DT元素下(不是我想要的效果……我希望DT和DD元素形成列，而额外的DD元素太宽)。

根据所有的权利，这应该只能在IE8+中工作，但由于IE7中的一个怪癖，它也可以在那里工作。

dl { width: 100%; overflow: hidden; background: #ff0; padding: 0; margin: 0 } dt { float: left; width: 50%; /* adjust the width; make sure the total of both is 100% */ background: #cc0; padding: 0; margin: 0 } dd { float: left; width: 50%; /* adjust the width; make sure the total of both is 100% */ background: #dd0; padding: 0; margin: 0 } <dl> <dt>Mercury</dt> <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd> <dt>Venus</dt> <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd> <dt>Earth</dt> <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd> </dl>

我最近需要混合内联和非内联dt/dd对，通过指定类dl-inline on <dt>元素后面应该跟着inline <dd>元素。

dt.dl-inline { display: inline; } dt.dl-inline:before { content:""; display:block; } dt.dl-inline + dd { display: inline; margin-left: 0.5em; clear:right; } <dl> <dt>The first term.</dt> <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt class="dl-inline">The second term.</dt> <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt class="dl-inline">The third term.</dt> <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt>The fourth term</dt> <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> </dl >

这适用于IE7+，符合标准，并允许不同的高度。

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

请参阅JSFiddle。

因为我还没有看到一个适用于我的用例的示例，所以这里是我能够实现的最完整的解决方案。

dd { margin: 0; } dd::after { content: '\A'; white-space: pre-line; } dd:last-of-type::after { content: ''; } dd, dt { display: inline; } dd, dt, .address { vertical-align: middle; } dt { font-weight: bolder; } dt::after { content: ': '; } .address { display: inline-block; white-space: pre; } Surrounding <dl> <dt>Phone Number</dt> <dd>+1 (800) 555-1234</dd> <dt>Email Address</dt> <dd><a href="#">example@example.com</a></dd> <dt>Postal Address</dt> <dd><div class="address">123 FAKE ST<br />EXAMPLE EX 00000</div></dd> </dl> Text

奇怪的是，它对display: inline-block不起作用。我想如果你需要设置任何dt元素或dd元素的大小，你可以将dl的显示设置为display: flexbox;显示:-webkit-flex;显示:flex;dd元素和dt元素的flex简写类似flex: 1.1 50% display为display: inline-block。但我还没有对此进行测试，所以请谨慎处理。