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 колонки вверх? Или, возможно, подскажете другое решение?

Спасибо за потраченное время!
  • Вопрос задан
  • 3686 просмотров
Решения вопроса 1
zzloy
@zzloy Автор вопроса
Дизайнер
Всем Masonry!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
denisisaychx
@denisisaychx
Как вариант можно .lastpost поставить position: absolute и два первых поста делать всегда пустыми. =)
Ответ написан
Комментировать
bahek2462774
@bahek2462774
К сожалению column-span можно выставить только all :-( я этого не знал.
как вариант можно выкрутиться так. jsfiddle.net/2tYYE
Ответ написан
HDApache
@HDApache
PHP программист
Чем float не устраивает? jsfiddle.net/Hx74e
Ответ написан
bahek2462774
@bahek2462774
тогда отказаться от column-count и сделать все position: absolute. И высчитывать для каждого блока top и left. По такому принципу работает мозаика фотографий в ленте вконтакте. Или же список товаров например на ебее www.ebay.com .
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы