Келгиле, сайттын сетка дизайнын карап чыгып, айрым компоненттерин бөлүп көрсөтөлү. Эмне үчүн float ушунчалык пайдалуу экендигин, ошондой эле үч агымдан жана веб-сайттын төмөнкү колонтитулунан биринчи веб торду куруунун популярдуу техникасын карап көрөлү.
Сайттын торчолуу курулушун изилдөө үчүн, "агым" деген эмне экендигин түшүнүшүңүз керек. Агым - бул биринин артынан бири жайгашкан сайттын элементтери. Мисалы, бул демейки боюнча биринин артынан экинчиси өтүп жаткан div элементтери болушу мүмкүн. Бирок агымды өзгөртүп, блок элементтеринин ордун өзгөртүүгө болот.
Агынды көзөмөлдөө үчүн, биз блоктун сол же оң жагына жайгаштыра турган float касиетин колдонобуз. CSS файлына жазуу жетиштүү:
"class or block name" {калкыма: оң / сол; }
Флоаттын бирден-бир кемчилиги - бир блокту экинчисинин үстүнө "каптап" кетүү мүмкүнчүлүгү.
Ачып калбоо үчүн, биз ачык-айкын колдонобуз: экөө тең - бул касиет блоктун айланасындагы агымды жөнгө салат. Мазмундун (тексттин, сүрөттөрдүн) көлөмүнө жараша мааниси калыптанып тургандай кылып, туурасы менен бийиктигин максималдуу жана минималдуу кылып коёбуз. Маржа - блоктун жайгашкан жерине жараша тышкы чектер автоматтык түрдө пайда болушу үчүн, автоуна маанисин коюңуз.
Флоат блокторду эки багытта жайгаштыра алгандыктан, сайтты солго жана оңго бөлүп берүү салтка айланган. Эгерде программистке эки гана агым керек болсо, анда ал сол жана оң жакты калкып чыгат, ал эми экиден көп болсо, анда ал маржаны колдонуп, чектерин жөндөйт. Бул кандайча болот:
.column1 {float: left; туурасы: 65px; мин бийиктиги: 50px; оң жактагы маржа: 9px; // Ортоңку кутудан 9px}
2 агым:
.column2 {float: left; // сол блокко, бирок "кайчылашпастан", анткени биз маржа туурасын колдондук: 80px; мин бийиктиги: 50px; }
3 агым:
.column3 {float: right; туурасы: 65px; мин бийиктиги: 50px; }
Төмөнкү колонтитул менен иштөө (.футбол):
.footer {clear: both; both; // эки жагын тең ороп}
Ушундайча үч агымдан турган float колдонуп сайт үчүн тор жасадык.
