Адаптивные колонки без бутстрап.css |
Вот, сделал css'ку для таблицы с двумя адаптивными колонками, которые меняют порядок при измении ширины области просмотра, с минимальной шириной одной из колонок. Пример на https://jsfiddle.net/utilmind/1zt248ek/, но демка есть и тут. Схлопывается когда ширина таблицы меньше 500px. Columns collapsed when width less than 500px.
UPD. А теперь версия, которая действительно устанавливает минимальную ширину ячейки. Увы, единственный способ сделать это — применить технику Flexbox от HTML5. Я честно пытался этого избежать, т.к. сомневался что flex корректно работает в IE, но похоже что этот пример (https://jsfiddle.net/utilmind/1zt248ek/8/) всё же работает... Columns collapsed when width less than 500px. Some long main content. ~76% width, when expanded.
This is Side panel with user profile. We want ~26% width, with minimal width of 230px.
Some notes... Unfortunately “min-width” doesn't works with floating elements. It works good in table cells, but once you make them "floating" — they stopping working within the table and break it. And it looks like calc() doesn't works too for relative positioned elements :( So it looks like the only way is to use "flex". (I'm reallly tried to avoid it initially.) See also previous version of this "fiddle", starting from 1st, to see the progress. |