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

Answer 2

这就是你想要的吗？当您说“所有内容都根据宽度适当包装”时，我不确定我是否理解。

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

#wrapper {
  padding: 15px;
}

.row {
  display: flex;
  flex-direction: row: flex-wrap:wrap;
  width: 100%;
  margin-left: -15px;
  margin-right: -15px;
}

.dl-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

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">
    <div class="dl-group">
      <dt class="col-1">Example Text 1</dt>
      <dd class="col-1">
        <input type="text">
      </dd>
    </div>

    <div class="dl-group">
      <dt class="col-2">Example Text 2</dt>
      <dd class="col-2">
        <input type="text">
      </dd>
    </div>

    <div class="dl-group">
      <dt class="col-3">Example Text 3</dt>
      <dd class="col-3">
        <input type="text">
      </dd>
    </div>

    <div class="dl-group">
      <dt class="col-1">Example Text 4</dt>
      <dd class="col-1">
        <input type="text">
      </dd>
    </div>

    <div class="dl-group">
      <dt class="col-2">Example Text 5</dt>
      <dd class="col-2">
        <input type="text">
      </dd>
    </div>
  </dl>
  <div>