Как сверстать такой вывод событий?

Question

[Sergey750il]

Доброго времени суток. Как сверстать такой вывод событий? Если задавать float то блоки начинают плыть при разной высоте. Но самая главная проблема это как задать боковое подчеркивание нужным блокам?

Answer 1

[iBird Rose]

display: inline-block тоже будет плыть как и float при разных высотах.
гугли плиточную расстановку. вот по первой ссылке из гугла dbmast.ru/adaptivnye-html-bloki-v-vide-kirpichnoj-...

Comments

[Sergey750il]

Метод хороший, но проблема в том, что на десктопе вывод идет друг под другом, а в мобильной сохранен порядок как в верстке. В итоге путаются даты.

Answer 2

[AlexanderShustik]

Есть js-плагин - masorny, (кирпичная кладка)

Answer 3

[Atllantis]

Например на дивах с помощью display: inline-block.
А боковое подчёркивание например так:

div { border-left: 1px #000 solid; }
div:nth-of-type(1) { border-left: none; }

Answer 4

[VsWeb]

Один контейнер, и в нём три дива, а уже в них, размещаются, ещё по два дива, каждый со своей высотой и рамкой.
Дивам первого уровня вложенности, можно задать свои классы, чтобы меньше css писать.

<div class="container">
    <div>
          <div></div>
          <div></div>
    </div>
    <div>
          <div></div>
          <div></div>
    </div>
    <div>
           <div></div>
           <div></div>
     </div>
</div>

.container {
width: 80%;
margin: o auto;
}
.container > div {
float: left;
width: 33.3333%;
}