如何使'dl'内容自动换行表'td'包装的方式？

Question

我试图尽可能远离使用表格进行格式化。

在表中，如果我的第二列中的单元格需要换行，则只会在该单元格中换行。当我尝试使用列表（dl）时，“第二列”（dd）包裹在整行之下。

dt {
  display: block;
  float: left;
  text-align: right;
  color: black;
  width: 150px;
}

dt::after {
  content: ":";
  padding-left: .5em;
  padding-right: .5em;
}

dd {
  display: block;
  color: blue;
}

<dl>
  <dt>System Type</dt>
  <dd>My System Type</dd>
  <dt>Manufacturer</dt>
  <dd>Very very very very very long second column</dd>
</dl>

输出屏幕截图：

Answer 1

我认为你必须硬编码第一列的宽度，这是我能够取得任何进展的唯一方法，但我认为这就是你要找的东西。在它到期的完全信用，我受到使用百分比的this answer的启发。如果您使用像素对宽度进行硬编码，那么在这种情况下效果会更好，因此您的“列”之间的差距不会像百分比一样增长/缩小。

你必须调整120px的值以满足你的需求，这是两个提供的值最好的。

* {
    margin: 0;
}
dl {
    width: 100%;
}
dt {
    float: left;
    text-align: right;
    /* Hard code the width of the first column here */
    width: 120px;
}
dt::after {
    content: ":";
    padding-left: .5em;
    padding-right: .5em;
}
dd {
    float: left;
    /* Hard code the width of the 2nd column here...
       ... make it take up all the remaining space of the parent
    */
    width: calc(100% - 120px);
}

<dl>
    <dt>System Type</dt><dd>My System Type</dd>
    <dt>Manufacturer</dt><dd>Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column</dd>
</dl>