Расположение блоков по 2 в ряд один за другим без пустого места?

Question

[Александр Максимов]

Подскажите как с помощью css расположить блоки вот так: prnt.sc/4ghX4Ocwq028

Потому что если использовать стандартное от ботстрап

<div class="row">
  <div class="col-sm-6"></div>
  <div class="col-sm-6"></div>
  <div class="col-sm-6"></div>
  <div class="col-sm-6"></div>
  <div class="col-sm-6"></div>
  <div class="col-sm-6"></div>
</div>

тогда получается вот такое
prnt.sc/YjxO9h9y1RI7

Т.е. есть пустые места если контента в одном блоке больше чем в другом. Один растягивает другой на всю высоту. Как это можно поправить?

Comments

[aleks-th]

class="col-sm-6" - это что и для чего ?
--
и ваши ссылки не работают вообщето

[Ivan Ustûžanin]

пока в CSS не сделали masonary или что-то подобное, остаётся использовать columns, но есть ли в Бутсрапе для этого классы я без понятия

[Сергей delphinpro]

Для вставки картинок используйте кнопку редактора

[Александр Максимов]

Сделал так:

<div class="rev_box">
<div class="rev_item">

</div>
</div>

.rev_box {
    -webkit-column-count: 2;
    column-count: 2;
}
.rev_item {
    box-sizing: border-box;
    display: inline-block;
    float: right;
}

Но получаю иногда такое:
prnt.sc/UsKZ67u8ZGxG

[Ivan Ustûžanin]

во-первых не стоит комментарии писать в качестве ответа
во вторых картинки можно нормально вставлять на этом сайте, как уже показали, а не использоваться сервисом, чтобы открыть который нужен ВПН
в-третьих напуркуа float и inline-block
в-четвёртых break-inside

[Александр Максимов]

1) это не ответ, так как решение глючное и по сути не рабочее.
2) ок
3) и? если их убрать тогда работает когда есть 3 комментария но крашится когда только 2 если добавить, тогда где 2 комментария все ок, а 3 крашится.
4) эта штука делает ту же бесполезную вещь что и просто inline-block, а именно

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

[Александр Максимов]

Но мне просто интересно, какой ... не хочу ругаться придумал что при column 2 и inline-block выводить элементы так:

Если отзыва 2, тогда оно в столбец пихает

И только когда 3 отзыва, тогда 3-й пихает вправо

И поправить это нельзя. куча настроек, а ни одна нормально не дает сделать так, чтобы нормально отображалось.

[Александр Максимов]

Мучения, запись #8272792932372b2

Если родителю задать column-count: 2;
Если дочерним элементам задать break-inside: avoid-column;
и убрать inline-block

тогда по 2 комментария отображает нормально

но если появляется 3й комментарий, тогда он липнет к правому краю в любой ситуации, даже если слева есть пустое место

Что с этой системой не так?

[Ankhena]

Что с этой системой не так?

Ещё раз: где песочница с кодом?
Но да, columns распределяет блоки автоматически, как умеет.

Если нужно, чтобы выше был всегда левый столбец, то потребуется JS.

И то, что вы написали не ответ, а уточнение к вопросу. Отредактируйте вопрос, добавьте ссылку на песочницу с кодом, иллюстрирующим проблему.

Answer 1

[rootnoroot]

Если хаотичная высота у каждого блока, то только в 2 колонки делать
то есть левая и правая колонка
а в ней уже itemы

напр так

Comments

[Александр Максимов]

Спасибо, буду пробовать)

[Ankhena]

rootnoroot в css сто лет существует свойство columns.
Так что делать лишние нелогичные обертки совсем не нужно.

[Александр Максимов]

Ankhena, columns работает криво. рвет блоки при флоате, а если без него и инлайн блоком тогда первые 2 блока всегда слева и только 3й начинает быть справа

[Ankhena]

Александр Максимов, какой ещё флоат?
И где песочница с кодом?

[rootnoroot]

Ankhena, с columns каким образом ты отрегулируешь количество блоков? если слева нужно 4 а справа1,2. и какой блок будлет слева, какой справа

[Ankhena]

rootnoroot,

с columns каким образом ты отрегулируешь количество блоков? если слева нужно 4 а справа1,2. и какой блок будлет слева, какой справа

Если конкретно важна сторона, то columns не поможет. Но тогда и вопроса не возникло бы, потому что ответ очевиден.

Вопрос возникает, когда количество блоков и/или их содержимое неизвестно.

[rootnoroot]

Ankhena, об этом стоит изначально думать
чаще всего потом приходится от columns отказываться по этим причинам
уже не раз попадал в просак с этим свойством
как по мне это хорошее решение для циклов, но по моему его еще не доделали на 100%

[Ankhena]

rootnoroot, тем не менее, когда известно кто в какую колонку должен попасть, вопрос вообще не возникает.

[DIVSIDE]

Александр Максимов, "рвет блоки при флоате" - ты застрял в 2005м??