Сетка в CSS

Question

Я хотел бы отобразить 3 белых блока в синем контейнере. Каждый с полем в 10 пикселей между.

В настоящее время у меня есть это:

<div class="wbg-create">
                <div class="full-create">
                  <div class="white-create">
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <t class="f30 helv grey">Create Group</t>
                    <br/>
                    <br/>
                    <br/>
                    <t class="f30 helv-b grey">Group Name</t>
                    <br/>
                    <br/>
                    <input class="gen-input helv-b">
                    <br/>
                    <br/>
                    <br/>
                    <t class="f30 helv-b grey">Array Type</t>
                    <br/>
                    <br/>
                    <select class="gen-input helv txtind-10">
                      <option>Option 1</option>
                      <option>Option 2</option>
                    </select>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <button class="b_next"><b>Next</b></button>
                  </div>
                  <div class="white-create" style="margin: 0 auto;"></div>
                </div>

              </div>

.wbg-create{
    position: absolute;
    width: 84%;
    background-color: #f3fbff;
    border-radius: 50px;
    height: 98vh;
    margin-top: 0px;
    text-align: center;
}
.f30{
    font-size: 30px;
}
.helv{
    font-family: Helvetica Neue;
}
.helv-b{
    font-family: Helvetica Neue;
    font-weight: bold;
}
.grey{
    color: #545454;
}
.gen-input{
    background-color: #e3e8ed;
    height: 50px;
    width: 300px;
    border-radius: 30px;
    border-color: transparent;
    text-align: center;
    font-size: 20px;
}
.txtind-10{
    text-indent: 10px;
}
.full-create{
    margin: 10px;
}
.white-create{
    left: 50%;
    width: 33%;
    background-color: white;
    border-radius: 50px;
    height: 96vh;
}
.b_next{
    border-radius: 50px;
    height: 45px;
    text-align: center;
    width: 100px;
    font-size: 20px;
    background-color: #cad2e7;
    color: #28284c;
    border-color: transparent;
    bottom: 30px;
}

.b_next:hover{
    border-radius: 50px;
    height: 45px;
    text-align: center;
    width: 100px;
    font-size: 20px;
    background-color: #dde7ff;
    color: #4e4e95;
    border-color: transparent;
}
.b_next:active{
    border-radius: 50px;
    height: 45px;
    text-align: center;
    width: 100px;
    font-size: 20px;
    background-color: #ffffff;
    color: #30a3f5;
    border-color: transparent;
}

Я знаю, что это действительно беспорядочно, и я должен использовать margin и padding вместо of <br/>, но я считаю, что это очень долгий процесс. Мое веб-приложение работает только в полноэкранном режиме и не может быть изменено в размере, поэтому это не должно быть большой проблемой.

Как мне заставить эти контейнеры отображаться рядом? В настоящее время есть рядом, но они отображаются под предыдущим.

Вот так:

[]-should be here-
  []
    []

Как это исправить?

Answer 1

Используя сетку.

.wbg-create {
display: grid;
grid-template-columns: repeat(3, 1fr)
grid-gap: 10px;
}

Вот ручка с рабочим ответом. https://codepen.io/jorgeberen/pen/wvKVBNN

Использование flex тоже должно помочь.

.wbg-create {
display: flex;
}

Поскольку display:flex отображает элементы в контейнере по умолчанию в горизонтальной строке, ваш три белых блока должны отображаться рядом. В этом случае это проще, чем использовать сетку.

Answer 2

Грязный хак:

.white-create{display:inline-block;}

Лучше:

Взгляните на Common CSS Шаблоны макетов Flexbox с примерами кода

Дополнительная информация: MDN flexbox