html - 两列形式，每列中有动态行数

Question

我正在尝试设计以下表格，其中将有 2 列。每列可以有任意数量的表单域，如左列只能有一个表单域，右列也只能有一个表单域，或者左列可以有两个表单域，右列可以有三个表单域，反之亦然。

我这样做的方式不会分隔两列。这是我所做的

这是我尝试使用 flex 的结果

.row {
  display: flex;
}

.input-wrapper {
  flex: 1;
  padding-left: 15px;
}

<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <input type="text" placeholder="width" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <select>
      <option>hello</option>
    </select>
  </div>
</div>

<br/><br/><br/><br/><br/>


<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
</div>

这是设计

Answer 1

首先，您需要将width: 100% 设置为您想要跨越的输入类型。在您的布局中，容器已经占据了整个宽度。

您还应该在input-wrapper 上使用display:flex 并设置

flex-direction: column;
justify-content: flex-end;

为了首先显示文本，然后在第二行显示输入。

.row {
  display: flex;
}

.input-wrapper {
  flex: 1;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


select{
  width: 100%;
}

select, input{
  border: 1px solid #e1e1e1;
  padding: 6px;
  border-radius: 3px;
}

label{
  font-size: 14px;
  color: #d1d1d1;
  margin-bottom: 4px;
}

<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <input type="text" placeholder="width" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <select>
      <option>hello</option>
    </select>
  </div>
</div>

<br/><br/><br/><br/><br/>


<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
</div>