html - <dl> 内的 CSS 列结构

Question

我正在开发一个特定的元素，我无法控制标记，其生成方式类似于下面(简化)。然而，客户希望将类似引导的列结构应用于 <dl>其中<dt> & <dd>对被视为分组在一起在一列中，并且所有内容都根据宽度适本地换行。还将有响应类，因此我不能简单地绝对定位所有内容或其他一些非动态解决方案。我尝试过 grid、flex、float 等，但我开始认为仅 CSS 的解决方案是不可能的。在不改变 HTML 的情况下，这样的事情是否可能实现？

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#wrapper{
  padding: 15px;
}
.row{
    width: 100%;
    margin-left: -15px;
    margin-right: -15px;
}
dt, dd {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}
dt + dd {
    clear: left;
    margin-bottom: 20px;
}
input{
    width: 100%;
}
.col-1 {
    width: 33.3333333333%;
}
.col-2 {
    width: 66.6666666667%;
}
.col-3 {
    width: 100%;
}

 <div id="wrapper">
   <dl class="row">
    <dt class="col-1">Example Text 1</dt>
    <dd class="col-1">
      <input type="text">
    </dd>
    <dt class="col-2">Example Text 2</dt>
    <dd class="col-2">
      <input type="text">
    </dd>
    <dt class="col-3">Example Text 3</dt>
    <dd class="col-3">
      <input type="text">
    </dd>
    <dt class="col-1">Example Text 4</dt>
    <dd class="col-1">
      <input type="text">
    </dd>
    <dt class="col-2">Example Text 5</dt>
    <dd class="col-2">
      <input type="text">
    </dd>
  </dl>
 <div>

---

澄清一下，这样的结果将是理想的预期输出。但正如我提到的，我无法更改标记，只能更改 CSS。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#wrapper {
  padding: 15px;
}

.row {
  width: 100%;
  margin-left: -15px;
  margin-right: -15px;
}

[class^="col-"] {
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom:15px;
}

input {
  width: 100%;
}

.col-1 {
  width: 33.3333333333%;
}

.col-2 {
  width: 66.6666666667%;
}

.col-3 {
  width: 100%;
}

<div id="wrapper">
  <div class="row">
    <div class="col-1">
      <label>Example Text 1</label>
      <input type="text">
    </div>
    <div class="col-2">
      <label>Example Text 2</label>
      <input type="text">
    </div>
    <div class="col-3">
      <label>Example Text 3</label>
      <input type="text">
    </div>
    <div class="col-1">
      <label>Example Text 4</label>
      <input type="text">
    </div>
    <div class="col-2">
      <label>Example Text 5</label>
      <input type="text">
    </div>
  </div>
  <div>

Answer 1

使用 CSS 网格布局很容易 - 您可以使用 3 列布局和每个 col-n元素可以使用 grid-column: n 占据 n 列。现在使用 grid-auto-flow: dense 填充布局中的孔。 - 请参阅下面的演示:

* {
  margin: 0;
  box-sizing: border-box;
}

#wrapper {
  padding: 15px;
}

.row {
  display: grid; /* grid container */
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-gap: 10px; /* row and column gap */
  grid-auto-flow: dense;
}

input {
  width: 100%;
}

.col-1 {
  grid-column: 1; /* first column */
}

.col-2 {
  grid-column: span 2; /* occuppy 2 columns */
}

.col-3 {
  grid-column: span 3; /* occupy 3 columns */
}

<div id="wrapper">
  <dl class="row">
    <dt class="col-1">Example Text 1</dt>
    <dd class="col-1">
      <input type="text">
    </dd>
    <dt class="col-2">Example Text 2</dt>
    <dd class="col-2">
      <input type="text">
    </dd>
    <dt class="col-3">Example Text 3</dt>
    <dd class="col-3">
      <input type="text">
    </dd>
    <dt class="col-1">Example Text 4</dt>
    <dd class="col-1">
      <input type="text">
    </dd>
    <dt class="col-2">Example Text 5</dt>
    <dd class="col-2">
      <input type="text">
    </dd>
  </dl>
  <div>