Доброй ночи!
Представьте себе страницу с постами в несколько колонок (зависит от размера экрана). Использована технология 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 колонки вверх? Или, возможно, подскажете другое решение?
Спасибо за потраченное время!
