将两列fieldset box紧密堆叠

Question

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

示例代码（我希望块 3 直接位于块 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 越接近你的需求

将两列fieldset box紧密堆叠

Stack two columns of fieldset boxes closely

html

css

fieldset