CSS <dl> 内的列结构

Question

我正在处理一个我无法控制标记的特定项目，它的生成类似于下面（简化）。但是，客户希望将类似 bootstrap 的列结构应用于 <dl>，其中 <dt> 和 <dd> 对被视为组合在一个列中，并且所有内容都适当地换行基于宽度。也会有响应类所以我不能简单地绝对定位一切或其他一些非动态解决方案。我试过 grid、flex、floats 等，我开始认为 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

这就是你想要的吗？当你说 "everything wraps appropriately based on width".

时，我不确定我是否理解

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

Answer 2

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

CSS <dl> 内的列结构

CSS column structure within <dl>

html

css

css-float