Search the Community

Впервые попала на проект с серьезным адаптивным дизайном, и спросить на проекте не у кого. Задача: обычное меню. При больших разрешениях выводится в одну строку, каждый пункт меню однострочный. При среднем размере экрана каждый из пунктов меню должен стать двухстрочным (т.е. не пункты переносятся на вторую строку, а каждый пункт сам по себе в 2 строки начинает располагаться). Вот набросала костяк: http://jsfiddle.net/8cSLF/ Немного игралась с white-space - не вышло. По идее, можно указать ширину для каждого пункта меню, и тогда текст автоматически будет переноситься в его границах, но все пункты разные, и эта идея кажется какой-то "костыльной". Вспомнила, что есть таблицы и обрадовалась, но потом поняла, что не совсем подойдут таблицы, т.к. для маленьких экранов нужно оставлять всего 3 пункта меню, а остальные показывать второй строкой по клику на More (т.е. пришлось бы как-то разбивать таблицу на несколько tr). Да, нужно поддерживать ИЕ7 и 8, поэтому с псевдоклассами и прочими фишками туговато. Буду очень признательна за помощь, потому что результат хотят быстро, а голова соображает медленно. Спасибо.