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
[ Хронологический вид ]Комментарии
Войдите, чтобы комментировать.