紧密堆叠两列fieldset框

Question

我有一个包含多个字段集的表单，其中包含不同数量的元素。是否可以使字段集框紧密填充列，而不是与另一列中的列对齐。

示例代码（我希望Block 1直接在Block 1下面）：

fieldset {
  float: left;
  margin-top: 1em;
  width: 45%;
  box-sizing: border-box;
  border: 1px solid;
}

fieldset label {
  display: block;
  float: left;
  width: 24em;
  margin-right: 1em;
}

fieldset legend {
  font-weight: bold;
  text-transform: uppercase;
}

<form method=post>
    <fieldset>
      <legend>Block 1:</legend>
      ABC
    </fieldset>
    <fieldset>
      <legend>Block 2:</legend>
      ABC <br/> 
      DEF <br/> 
      GHI <br/> 
      JKL
    </fieldset>
    <fieldset>
      <legend>Block 3:</legend>
      ABC <br/>
      DEF <br/>
      GHI <br/>
      JKL
    </fieldset>
</form>

我无法手动移动它们，因为顺序很重要，每个字段集中的元素数量是动态的（cgi python代码）。

Answer 1

您可以将字段集划分为2列，并使用vertical-align:top将最小列对齐到顶部

.column1, .column2{
  width: 45%;
  display: inline-block;
  vertical-align: top;
}
fieldset {
  float: left;
  margin-top: 1em;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid;
}

fieldset label {
  display: block;
  float: left;
  width: 24em;
  margin-right: 1em;
}

fieldset legend {
  font-weight: bold;
  text-transform: uppercase;
}

<form method=post>
    <div class="column1">
      <fieldset>
        <legend>Block 1:</legend>
        ABC
      </fieldset>
      <fieldset>
        <legend>Block 3:</legend>
        ABC <br/>
        DEF <br/>
        GHI <br/>
        JKL
      </fieldset>
    </div>
    <div class="column2">
      <fieldset>
        <legend>Block 2:</legend>
        ABC <br/> 
        DEF <br/> 
        GHI <br/> 
        JKL
      </fieldset>
    </div>
</form>

Answer 2

你可以看看multi-column-layout / columns

form {
column-count:2;
column-fill:balance;
padding-top:1em;
}
fieldset {
  margin-bottom: 1em;
  box-sizing: border-box;
  border: 1px solid;
}

fieldset label {
  display: block;
  width: 24em;
  margin-right: 1em;
}

fieldset legend {
  font-weight: bold;
  text-transform: uppercase;
}

<form method=post>
    <fieldset>
      <legend>Block 1:</legend>
      ABC
    </fieldset>
    <fieldset>
      <legend>Block 2:</legend>
      ABC <br/> 
      DEF <br/> 
      GHI <br/> 
      JKL
    </fieldset>
    <fieldset>
      <legend>Block 3:</legend>
      ABC <br/>
      DEF <br/>
      GHI <br/>
      JKL
    </fieldset>
</form>

---

display:grid可以提供帮助，但您必须手动设置行和列的位置以及跨越多少行或列。

display:flex将需要一个设置高度来将内容包装到下一列。

column似乎更接近您的需求