CSS Drop макет
Original on muffinresearch.co.uk
Simon Collison апублікаваў артыкул пра яго новы фіксаванай шырынёй 3-макет якіх магчыма з прымешкай JavaScript, каб змяніць размяшчэнне на аснове дазволу кліента акна. Больш падрабязную інфармацыю пра ў размяшчэнне Simon бачыце гэты пост. Tim згадала пра свой сайт у каментарах да Collylogic кажуць, што мой сайт ахоплівае тыя ж функцыі, не патрабуючы JavaScript. Так гэты пост больш падрабязныя растлумачэнні пра тое, як мае працы макета.
Калі я стварыў гэты сайт я жадаў бы мець чатыры калоны, якія ўсе фіксаванай шырыні. Ідэя складалася ў тым, што калі змяніць памер акна, то ў слупках зваліцца ўніз, калі не было досыць месцы. Каб растлумачыць больш падрабязна тут візуальна:
Для дасягнення жаданага эфекту я выкарыстоўваю паплаўкі. Натуральная ўласцівасць плылі элемент зваліцца, калі бракуе месцы, пакуль не будзе досыць месцы. Гэта азначае, што калоны на далёкай правай зваліцца, калі акно паўторна памеру. Адной з праблем, з гэтым было б, калі асноўны слупок утрыманне не было досыць высокім перамешчаных калонцы абгарнулі б пад ім. Для барацьбы з гэтым непажаданым эфектам я выкарыстоўваў абгортка з левага краю, каб ‘трымаць’ 3 меншыя калоны справа ад асноўнага ўтрымання.
Недахопы
Ёсць некалькі абмежаванняў з гэтай тэхнікай. 4-м (чацвярцічныя) калонцы зваліцца ніжэй другі (сярэдняй) слупка, калі другі (сярэдняй) слупок той жа вышыні ці меней высокай, чым трэці (трэцяй прыступкі) слупка.
Мін-шырыня была ўсталявана так, што цела гарызантальнай прагорткі-бар будзе выглядаць, калі змене памеру акна ніжэй 770px. Гэта не працуе ў IE, і ні робіць уласныя словы.
Дэма
Наступныя дэма грубіянска больш спрошчанай, але даць вам уяўленне пра тое, як гэта схема працуе.
Апошняе абнаўленне: Richard Rutter напісаў да кароткай аблавы на адпаведнай раскладкі у адказ на арыгінальны пост у Коллі.
