Задать вопрос
zzloy
@zzloy
Дизайнер

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

Доброй ночи!

Представьте себе страницу с постами в несколько колонок (зависит от размера экрана). Использована технология 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. Тогда происходит следующая ситуация:

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

Спасибо за потраченное время!
  • Вопрос задан
  • 3689 просмотров
Подписаться 2 Оценить 1 комментарий
Решения вопроса 1
zzloy
@zzloy Автор вопроса
Дизайнер
Всем Masonry!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
denisisaychx
@denisisaychx
Как вариант можно .lastpost поставить position: absolute и два первых поста делать всегда пустыми. =)
Ответ написан
Комментировать
HDApache
@HDApache
PHP программист
Чем float не устраивает? jsfiddle.net/Hx74e
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы