Плотно сложите два столбца наборов полей

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

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

что значит прямо??

— 20.03.2019 11:08

Вы пытаетесь установить 3 столбца или в одну строку?

— 20.03.2019 11:13

Внимательно прочитайте это: regisphilibert.com/blog/2017/12/…

— 20.03.2019 11:27

Прямо -> Следование без пробелов.

— 20.03.2019 11:32

html css fieldset

20.03.2019 11:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Это делает то, что я хочу, но мне нужно разделить их на столбцы. Это решение, которое я использую сейчас.

— 20.03.2019 12:15

20.03.2019 11:24

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

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

Решение похоже на то, что я хочу, но порядок неправильный. Похоже, колонка - это путь.

— 20.03.2019 12:06

20.03.2019 11:32