Question

我正在处理一个我无法控制标记的特定项目，该标记的生成类似于以下内容（简化）。但是，客户端希望在<dl>和<dt>对中将<dd>和*{ 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>上使用类似引导程序的列结构，并且根据宽度适当地包装所有内容。还将有响应式类，因此我不能简单地将所有内容绝对定位或其他非动态解决方案。我尝试了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;
}

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

为了澄清，类似这样的东西将是理想的预期输出。但是正如我提到的，我无法更改标记，只能更改CSS。

providers: [DemoService]

Dahua IPC-D2B20-L

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>

<dl>中的CSS列结构

2 个答案: