13 636
правок
Изменения
Новая страница: «Ну я джедай)) для адаптивной вёрстки сделал на чистом HTML+CSS табличку размером 1x4 (1 строка, 4…»
Ну я джедай)) для адаптивной вёрстки сделал на чистом HTML+CSS табличку размером 1x4 (1 строка, 4 столбца), которая при необходимости опять-таки посредством чистого CSS превращается в таблицу 2x2, при этом она остаётся именно таблицей, а не набором плавающих слоёв, и во второй строчке оказываются не 3 и 4 ячейки, как в решении с плавающими слоями, а 2 и 4, и решение легко меняется для выбора другой комбинации.
Хак основан на применении rowspan и скрытии ячеек через display: none, поэтому хорошо работает во всех браузерах. Идея:
2x2: все ячейки видны, но пустые незаметны, ибо схлопываются до нулевой ширины.
{| class="wikitable"
|-
|rowspan=2| Ячейка 1, rowspan=2 ||style="color: gray"| пустая ячейка ||rowspan=2| Ячейка 3, rowspan=2 ||style="color: gray"| пустая ячейка
|-
|style="color: gray"| пустая ячейка (строка 2) ||style="color: gray"| пустая ячейка (строка 2)
|-
| Ячейка 2 ||style="color: gray"| пустая ячейка || Ячейка 4 ||style="color: gray"| пустая ячейка
|}
1x4: путём display: none целиком скрывается 2-я строка (<tr>), состоящая из двух пустых ячеек, а также пустые ячейки (<td>) в 3-ей строке. Скрытие второй строки заставляет rowspan захватить третью, ячейки 2 и 4 позиционируются на свои места, а пустые схлопываются до нулевой высоты (они ж пустые!) и становятся не видны. Выглядит это как таблица 1x4.
{| class="wikitable"
|-
|rowspan=2| Ячейка 1, rowspan=2 ||style="color: gray"| пустая ячейка ||rowspan=2| Ячейка 3, rowspan=2 ||style="color: gray"| пустая ячейка
|-
| Ячейка 2 || Ячейка 4
|}
Вуаля — вёрстка осталась неизменной, путём чистого CSS таблица превращена из 2x2 в 1x4! Стилевое преобразование легко вешается на Media Query и становится частичкой адаптивной вёрстки (responsive layout).
А я джедай :-P
{{wl-publish: 2014-09-20 02:32:14 +0400 | VitaliyFilippov }}
Хак основан на применении rowspan и скрытии ячеек через display: none, поэтому хорошо работает во всех браузерах. Идея:
2x2: все ячейки видны, но пустые незаметны, ибо схлопываются до нулевой ширины.
{| class="wikitable"
|-
|rowspan=2| Ячейка 1, rowspan=2 ||style="color: gray"| пустая ячейка ||rowspan=2| Ячейка 3, rowspan=2 ||style="color: gray"| пустая ячейка
|-
|style="color: gray"| пустая ячейка (строка 2) ||style="color: gray"| пустая ячейка (строка 2)
|-
| Ячейка 2 ||style="color: gray"| пустая ячейка || Ячейка 4 ||style="color: gray"| пустая ячейка
|}
1x4: путём display: none целиком скрывается 2-я строка (<tr>), состоящая из двух пустых ячеек, а также пустые ячейки (<td>) в 3-ей строке. Скрытие второй строки заставляет rowspan захватить третью, ячейки 2 и 4 позиционируются на свои места, а пустые схлопываются до нулевой высоты (они ж пустые!) и становятся не видны. Выглядит это как таблица 1x4.
{| class="wikitable"
|-
|rowspan=2| Ячейка 1, rowspan=2 ||style="color: gray"| пустая ячейка ||rowspan=2| Ячейка 3, rowspan=2 ||style="color: gray"| пустая ячейка
|-
| Ячейка 2 || Ячейка 4
|}
Вуаля — вёрстка осталась неизменной, путём чистого CSS таблица превращена из 2x2 в 1x4! Стилевое преобразование легко вешается на Media Query и становится частичкой адаптивной вёрстки (responsive layout).
А я джедай :-P
{{wl-publish: 2014-09-20 02:32:14 +0400 | VitaliyFilippov }}