Колоночная адаптивная вёрстка?

Question

[Igor Lanko]

Добрый вечер.

Уже обращался с такой проблемой, так и не смогли найти достойного решения.
Суть проблемы здесь: Занятие одним блоком сразу двух колонок CSS column

Я пробовал использовать js-скрипты автоматического построения grid-layout в зависимости от размера блоков: раз, два, три, но совсем не могу с ними разобраться. Все сыроваты и, к сожалению, не выполняют мою задачу.

Возможно, вы что-нибудь подскажете? 4 колонки, количество которых уменьшается\увеличивается в зависимости от разрешения экрана и (самое важное) 1 блок всей структуры равен размеру двух колонок. При этом, блоки должны занимать всю ширину контентной части и иметь % ширину. (То есть, если у нас 4 колонки, то блоки шириной 25%, а 1ый блок (грубо говоря) 50%) Прошу, разжуйте, уже 2ую неделю с этим совокупляюсь.

Заранее, огромное спасибо!

Answer 1

[maxfox]

А почему вам нужны именно column? Я так понял, это отдельные блоки, каждый со своим контентом?.
Чем вас не устраивают inline-block'и?

CSS Column пока не везде работает. Лучше обычная блочная верстка, а если нужно растягивать контент на несколько блоков - то js.

Answer 2

[Руслан Лопатин]

Никогда с колонками не работал, но первое что пришло в голову - это колонки внутри колонок: jsfiddle.net/FM92Z/1 Так вы хотели?

Comments

[Igor Lanko]

Да, что-то подобное, но нужна кросс-браузерность. column не работает во многих

[Igor Lanko]

Поэтому выбрал именно решения по ссылкам.

Answer 3

[Андрей Гуртовой]

угу, inline-block - то что Вам нужно. Единственная проблема в том, что нужно избавиться от пробельных символов между блоками .post.
Это можно сделать разными способами:
1. Убрав их с помощью джаваскрипта.

$('.columns')
  .contents()
  .filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
  }).remove();

2. Закомментировать.

<div class="columns"><!-- 
    --><div class="post">text<br>text</div><!-- 
    --><div class="post">text<br>text<br>text<br>text</div><!-- 
...
    --><div class="post">text<br>text</div><!-- 
    --><div class="post">text<br>text</div><!-- 
--></div>

3. Выставить у родителя font-size: 0; , и назначить для .post font-size: medium;
4. Ну или писать всё одной строкой.

Answer 4

[wintermoon]

Решение можно добиться на flexbox. Немного поиграться с жадностью и будет готово :)

Comments

[Igor Lanko]

Ну, тогда я о нем еще не знал :)