html - 如何并排显示数据

Question

我正在尝试使用最简单的代码并排显示数据。

问题是当数据丢失时，右侧无法正确 float 。

如何解决？

.pair {
  background-color: #ccc;
}
.pair dt {
  float: left;
  width: 90px;
  text-align: right;
  color: #999;
}
.pair dd {
  margin: 0 0 0 100px;
}

<dl class="pair">
  <dt>Date</dt>
  <dd>date goes here</dd>
  <dt>Country</dt>
  <dd>USA</dd>
  <dt>Age</dt>
  <dd></dd>
  <dt>Name</dt>
  <dd></dd>
  <dt>Other</dt>
  <dd>other info goes here</dd>
</dl>

Answer 1

您需要添加dd:empty {clear:left}

并且您可能需要 .pair 中的 float:left (可选)

.pair {
  background-color: #ccc;
  float: left
}
.pair dt {
  float: left;
  width: 90px;
  text-align: right;
  color: #999;

}
.pair dd {
  margin: 0 0 0 100px;
}
.pair dd:empty {
  clear: left
}

<dl class="pair">
  <dt>Date</dt>
  <dd>date goes here</dd>
  <dt>Country</dt>
  <dd>USA</dd>
  <dt>Age</dt>
  <dd>00</dd>
  <dt>Name</dt>
  <dd>xxxx</dd>
  <dt>Other</dt>
  <dd>other info goes here</dd>
</dl>
<dl class="pair">
  <dt>Date</dt>
  <dd>date goes here</dd>
  <dt>Country</dt>
  <dd>USA</dd>
  <dt>Age</dt>
  <dd></dd>
  <dt>Name</dt>
  <dd></dd>
  <dt>Other</dt>
  <dd>other info goes here</dd>
</dl>