如何并排显示数据

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}

您可能需要float:left中的.pair（可选）

.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>

Answer 2

将clear: both添加到.pair dt - 这会强制它破坏行

编辑/添加：我添加了一个片段，这是唯一的变化。

.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>

.pair {
  background-color: #ccc;
}
.pair dt {
  float: left;
  width: 90px;
  text-align: right;
  color: #999;
  clear: both;
}
.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>