Сложите два столбца полей fieldset близко - PullRequest
Новая
       23

Сложите два столбца полей fieldset близко

0 голосов
/ 20 марта 2019

У меня есть форма с несколькими наборами полей, с различным количеством элементов. Можно ли сделать так, чтобы поля набора полей плотно заполняли столбцы, а не выравнивались с полями в другом столбце.

Пример кода (я хочу блок 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).

Ответы [ 2 ]

2 голосов
/ 20 марта 2019

Вы можете взглянуть на многостолбцовый макет / столбцы 

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 кажется ближе к вашим потребностям

1 голос
/ 20 марта 2019

Для этого вы можете разделить наборы полей на 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>
...