Занятие одним блоком сразу двух колонок CSS column?

Question

[Igor Lanko]

Доброй ночи!

Представьте себе страницу с постами в несколько колонок (зависит от размера экрана). Использована технология CSS Columns. Код следующий: JSFiddle/

<div class="columns">
   <div class="post lastpost"></div>
   <div class="post"></div>
   <div class="post"></div>
</div>

.columns {
  -webkit-column-count: 4;
   -moz-column-count: 4;
}

.post {
     width: 100%;
     display: inline-block;
}

Проблема: блок с классом lastpost является последней «горячей» новостью и должен быть больше, чем остальные блоки. То есть если на экране 4 колонки, значит обычный пост имеет ширину 25%. Выходит, что «горячий» пост в данной ситуации должен занимать 50%. Но так не получится по понятным причинам: колонка не позволит выйти за границы.

Выход напрашивался один: вынести блок последней новости за границы .columns. Тогда происходит следующая ситуация:

Вопрос: как поднять последние 2 колонки вверх? Или, возможно, подскажете другое решение?

Спасибо за потраченное время!

Comments

[Krickt]

А вы знаете, что это свойство не поддерживает даже IE9?

Answer 1

[Igor Lanko]

Всем Masonry!

Answer 2

[Denis Isaychenko]

Как вариант можно .lastpost поставить position: absolute и два первых поста делать всегда пустыми. =)

Answer 3

[Руслан Касымов]

Чем float не устраивает? jsfiddle.net/Hx74e

Comments

[Руслан Касымов]

Тогда inline-block jsfiddle.net/SbE9b

[Руслан Касымов]

можно менять vertical-align: bottom; или vertical-align: top; для .post на Ваш вкус