Как реализовать «таблицу» в css с переносимыми «колонками»?

Question

[Дмитрий]

Я ранее уже задавал вопрос, но не верно поставил его.
Суть задачи:
Есть сайт на WP+Woo
Мне необходимо кастомить страницу вывода списка категорий товаров. Просто картинка и подпись снизу (по дефолту) меня не устраивают. Я хочу сделать что-то вроде этого, но с адаптивным дизайном.

Как видно из примера, есть 2 колонки для вывода категорий. Каждая категория отображена как

• Строка Width:100% от блока, aligncenter(Наименование категории)
  
• Строка в 2 колонки, с картинкой слева и контентом справа
  
• И завершает все это строка width:100% от 2-ой колонки 2-ой строки, alignright(ссылка "подробнее")
  

Сперва думал использовать row-fluid из bootstrap. Там все прописано как нужно, при изменении разрешения экрана блоки перестраиваются один под другим в зависимости от float. Но одно меня не устроило, а именно то, что при такой конструкции

<div class="row-fluid">
   <div class="span3">
      <p>Col1-content</p>
   </div>
   <div class="span9">
      <p>Col2-content</p>
   </div>
</div>

Высота блоков span3 и span9 не равны и как их выровнять по высоте наибольшего я не знаю.
Мне посоветовали использовать table и table-cell соответственно, но перенос table-cell невозможен как я ни пытался, ведь новая строка сама по себе не нарисутеся. То есть использовать решение в адаптивном дизайне нельзя или я не знаю как.

Посему вопрос остается открытым:
1) Как выровнять высоту блоков span внутри row-fluid?
или
2) Что использовать кроме row-fluid для решения поставленной задачи?

Answer 1

[Дмитрий]

Все не то.
Наконец то нашел, вроде это то, что нужно. Мало ли кому пригодится:
bootstrap-3-responsive-columns-of-same-height

Описание как с этим работать

В мемориз: неплохая и очень понятная статья на Великом и могучем.

Answer 2

[VA_ic2b]

Для Вашей задачи css-решение является наиболее экономичным. Для row-fluid используйте table-row, для span - table-cell в случае десктопа. Для мобильных гаджетов в таблице стилей задайте блочное определение этих элементов. Чтобы описать ситуацию более конкретно нужен сценарий Вашего адаптивного дизайна - что как трасформируется в зависимости от ширины экрана гаджета.

Comments

[Дмитрий]

Хм. С блоками у меня проблема. как вы могли заметить)) Недостаток понимания возможностей и свойств элементов.
Было бы более наглядно взглянуть на некоторый пример, если таковой где-нибудь есть.

А сценарий у меня простой.

В десктоп варианте
контент область делим на 2 колонки для вывода списка категорий. Как я выше в ссылке указывал.
То есть есть строка, которая делится на 2 условных колонки(или 2 блока, я не знаю). Под ней еще строка, которая делится на 2 условных колонки. И так далее, пока не будет выведен весь список.
В вышеприведенной ссылке это показано наглядно. Так же в этой ссылке, как вы могли заметить, высота левого и правого элементов(или блоков?) равны, что выглядит аккуратно и не "порвано".

Внутри каждого элемента я планирую уже "расписать" саму контент-составляющую.
Это наименование категории, это картинка категории, это текстовое наполнение описания категории и ссылка подробнее.
То есть элемент у меня будет состоять из 3 строк.
Первая строка блока: ширина 100% родит. элемента. - Наименование категории
Вторая строка блока: - блоки 3/12 от ширины (картинка) и 9/12 от ширины (описание категории).
Третья строка: ширина 100% - ссылка "подробнее"

В мобильной версии
Контент-область в одну колонку. То есть каждая следующая категория под предыдущей.
Здесь уже высота элементов -по контенту, ведь левых и правых нет, выравнивать нечего.

Внутри этого блока дочерние выстраиваются один под другим с порядком left-to-right
То есть
Первая строка - наименование категории
Вторая строка - картинка
Третья строка - Описание категории
Четвертая строка - ссылка "подробнее"

Еще одна особенность в том, что при выводе категорий (в коде шаблона) есть возможность узнать первый это или последний элемент в строке, можно узнать количество колонок, предусмотренное для десктопа, но узнать мобильная версия сайта показывается или десктопная можно узнать только в css, если я все правильно понимаю.
То есть мне нужно каждую выводимую строку обернуть в table-row. Не вопрос - обернем.
А каждую выводимую в строке категорию в table-cell соответственно. Тоже не вопрос, обернем.

Тогда вопрос: как в css указать, что каждый table-cell должен перемещаться на следующую строку за предыдущим, если разрешение экрана такое-то?

[VA_ic2b]

В html в секции head указываем спецификацию адаптивного дизайна
'< meta name="viewport" content="width=device-width; initial-scale=1.0" >'

Теперь css - как я уже сказал в базовой версии css прописываем стили для десктопа с использованием table-row, table-cell. Лучше использовать ширину в %. После того как настроите отображение для десктопа в конце таблицы стилей пропишите определения для гаджетов. Например планшет вертикальная ориентация:
'media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.row-fluid { width:100%; display:block; }
.span3, .span9 { width:100%; display:block;}
}'

Для работы с адаптивным дизайном нужно изучить медиа-запросы. Для затравки - htmlbook.ru/css/value/media

[Дмитрий]

VA_ic2b: Немного не понял каким образом мне это сделать при генерации страницы. Сам код страницы генерируется в content-product_cat.php Там (в коде php) я могу дописать во что мне оборачивать категорию. В row_fluid или в table-row или в свой класс. Я не могу менять css на этапе генерации странице же....?

[Дмитрий]

Вроде получилось.... Буду тестить: jsfiddle.net/gab1oq35