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

您可以看看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似乎更接近您的需求

Answer 2

您可以为此将字段集分为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>

紧密堆叠两列字段集框

2 个答案: