0

HTML:

<div class="size_block">
    <input type="checkbox"><label>s</label>
    <input type="checkbox"><label>m</label>
    <input type="checkbox"><label>l</label>
    <input type="checkbox"><label>xl</label>
    <input type="checkbox"><label>xxl</label> 
    <input type="checkbox"><label>xxxl</label>
</div>

Всего 6 размеров. Как сделать отображение размеров в две колонки по 3 размера, причем в первой колонке s,m,l и во второй xl,xxl,xxxl?

2

2 ответа 2

2

.size_block {
  column-count: 2;
}

label {
  display: block;
}
<div class="size_block">
  <label><input type="checkbox">s</label>
  <label><input type="checkbox">m</label>
  <label><input type="checkbox">l</label>
  <label><input type="checkbox">xl</label>
  <label><input type="checkbox">xxl</label>
  <label><input type="checkbox">xxxl</label>
</div>

2

Вариант 1. CSS Multiple Columns

.size_block {
    column-count: 2;
}

.size_block label {
    display: block;
}
<div class="size_block">
    <label><input type="checkbox">s</label>
    <label><input type="checkbox">m</label>
    <label><input type="checkbox">l</label>
    <label><input type="checkbox">xl</label>
    <label><input type="checkbox">xxl</label> 
    <label><input type="checkbox">xxxl</label>
</div>

Вариант 2. CSS Flex колонки и ограничение высоты

.size_block {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 60px;
}

.size_block label {
    display: block;
}
<div class="size_block">
    <label><input type="checkbox">s</label>
    <label><input type="checkbox">m</label>
    <label><input type="checkbox">l</label>
    <label><input type="checkbox">xl</label>
    <label><input type="checkbox">xxl</label> 
    <label><input type="checkbox">xxxl</label>
</div>

Вариант 3. CSS Flex ряды и order

.size_block {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.size_block label {
    display: block;
    width: 50%;
}

.size_block label:nth-child(1) {
    order: 1;
}

.size_block label:nth-child(2) {
    order: 3;
}

.size_block label:nth-child(3) {
    order: 5;
}

.size_block label:nth-child(4) {
    order: 2;
}

.size_block label:nth-child(5) {
    order: 4;
}

.size_block label:nth-child(6) {
    order: 6;
}
<div class="size_block">
    <label><input type="checkbox">s</label>
    <label><input type="checkbox">m</label>
    <label><input type="checkbox">l</label>
    <label><input type="checkbox">xl</label>
    <label><input type="checkbox">xxl</label> 
    <label><input type="checkbox">xxxl</label>
</div>

Вариант 4. CSS Grid

.size_block {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 1fr);
}

.size_block label {
    display: block;
}
<div class="size_block">
    <label><input type="checkbox">s</label>
    <label><input type="checkbox">m</label>
    <label><input type="checkbox">l</label>
    <label><input type="checkbox">xl</label>
    <label><input type="checkbox">xxl</label> 
    <label><input type="checkbox">xxxl</label>
</div>

4
  • Мне нужно без доваления лишних контейнеров 21 ноя 2018 в 20:15
  • инпуты в лейблы можно оборачивать? @ArturHan 21 ноя 2018 в 21:09
  • Да, главное, чтобы конечный результат был нормальный 22 ноя 2018 в 3:39
  • @ArturHan столько реализаций будет достаточно? =) 22 ноя 2018 в 10:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.