2014-09-20 Я HTML джедай)))

< Блог:Виталий Филиппов

Ну я джедай)) для адаптивной вёрстки сделал на чистом HTML+CSS табличку размером 1x4 (1 строка, 4 столбца), которая при необходимости опять-таки посредством чистого CSS превращается в таблицу 2x2, при этом она остаётся именно таблицей, а не набором плавающих слоёв, и во второй строчке оказываются не 3 и 4 ячейки, как в решении с плавающими слоями, а 2 и 4, и решение легко меняется для выбора другой комбинации.

Хак основан на применении rowspan и скрытии ячеек через display: none, поэтому хорошо работает во всех браузерах. Идея:

2x2: все ячейки видны, но пустые незаметны, ибо схлопываются до нулевой ширины.

Ячейка 1, rowspan=2 пустая ячейка Ячейка 3, rowspan=2 пустая ячейка
пустая ячейка (строка 2) пустая ячейка (строка 2)
Ячейка 2 пустая ячейка Ячейка 4 пустая ячейка

1x4: путём display: none целиком скрывается 2-я строка (<tr>), состоящая из двух пустых ячеек, а также пустые ячейки (<td>) в 3-ей строке. Скрытие второй строки заставляет rowspan захватить третью, ячейки 2 и 4 позиционируются на свои места, а пустые схлопываются до нулевой высоты (они ж пустые!) и становятся не видны. Выглядит это как таблица 1x4.

Ячейка 1, rowspan=2 пустая ячейка Ячейка 3, rowspan=2 пустая ячейка
Ячейка 2 Ячейка 4

Вуаля — вёрстка осталась неизменной, путём чистого CSS таблица превращена из 2x2 в 1x4! Стилевое преобразование легко вешается на Media Query и становится частичкой адаптивной вёрстки (responsive layout).

А я джедай :-P

[ Хронологический вид ]Комментарии

(нет элементов)

Войдите, чтобы комментировать.

Do you want to try some new features? By joining the beta, you will get access to experimental features, at the risk of encountering bugs and issues.

Ок Нет, спасибо