Веб-беттің орналасуын жобалау үшін CSS-нің float сипатын пайдалану
CSS сипаты орналасу үшін өте маңызды сипат. Бұл веб-бетіңіздің конструкцияларын сіз қалағандай көрсетуіңізге мүмкіндік береді, бірақ оны пайдалану үшін оны қалай жұмыс істейтінін түсінуіңіз керек.
Стиль кестесінде CSS float сипаты келесідей болады:
.right {float: right; }
Бұл браузерге «дұрыс» сыныппен барлық оң жаққа қарай ауысуы керектігін айтады.
Сіз оны келесідей тағайындай аласыз:
class = «right» />
CSS-нің float Property-мен немен айналыстай аласыз?
Сіз әрбір элементті веб-бетте жылжытуға болмайды. Блоктық деңгейдегі элементтерді ғана өзгерте аласыз. Бұл беттерде суреттер (), параграфтар (), бөлімдер () және тізімдер () сияқты беттің блогын қабылдайтын элементтер.
Мәтінге әсер ететін, бірақ беттегі қорапты жасамайтын басқа элементтер кірістірілген элементтер деп аталады және оларды шығаруға болмайды. Бұл span (), line breaks (), strong emphasis () немесе курсив () сияқты элементтер.
Қайда қайда?
Оңға немесе солға элементтерді өзгерте аласыз. Жылжымалы элементтен кейінгі кез келген элемент екінші жағынан өзгермелі элемент айналасында ағып кетеді.
Мысалы, егер суретті солға айналдырсам, оның артындағы кез келген мәтін немесе басқа элементтер оң жаққа қарай ағып кетеді. Егер суретті оңға қарай айналдырсам, оның артындағы кез келген мәтін немесе басқа элементтер солға қарай айналады. Браузер кескіндерді көрсету үшін орнатылса, оған бөгет мәтінінде орналастырылатын сурет оған ешқандай өзгермелі стильсіз көрсетіледі.
Бұл, әдетте, суреттің төменгі жағында көрсетілген келесі мәтіннің бірінші жолында болады.
Олар қаншалықты шомылатын болады?
Қалқымалы элемент контейнер элементінің сол жағына немесе оң жағына дейін жылжиды. Бұл сіздің кодыңыздың қалай жазылғанына байланысты бірнеше түрлі жағдайларға әкеледі.
Осы мысалдар үшін сол жаққа кішігірім DIV элементін өзгерткім келеді:
- Егер қалқымалы элемент алдын ала анықталған ені болмаса, қалқымадан тәуелсіз, көлденең кеңістік талап етіледі және қол жетімді болады. Ескертпе: кейбір браузерлер ені анықталмаған кезде, қалқымалы элементтердің жанында элементтерді орналастыруға тырысады, әдетте, ендірілмеген элементті кеңістіктің аз мөлшерін ғана береді. Сондықтан сіз әрқашан өзгермелі элементтерде енін анықтаңыз .
- Егер контейнер элементі HTML элементі болса, өзгермелі DIV беттің сол жақ шетінде отырады.
- Егер контейнер элементі басқа нәрседе болса, қалқымалы DIV контейнердің сол жақ шетіне отырады.
- Сіз өзгермелі элементтерді кірістіре аласыз, бұл флоаттың таңғажайып жерде аяқталуына әкелуі мүмкін. Мысалы, бұл өзгермелі оң жақты DIV ішіндегі сол жақтағы DIV болып табылады.
- Контейнерде бөлме болса, флоатизацияланған элементтер бір-біріне жақын отырады. Мысалы, бұл контейнерде 400px кең контейнерде жүзетін үш 100px кең DIV элементтері бар.
Фотосурет галереясының орналасуын жасау үшін тіпті қалқып шығуға да болады. Әрбір нобайды (ол бірдей өлшемде болғанда жақсы жұмыс істейді) DIV-де тақырыппен және контейнердегі DIV элементтерін қалқымалы етіп қойыңыз.
Браузер терезесі қаншалықты кең емес болса да, нобайлар біркелкі болып шығады.
Флоатты өшіру
Элементті жүзу үшін қалай алуға болатындығын білсеңіз, қалқымалы жолды өшіруді білу маңызды. Сіз CSS-нің ашық сипатымен float-ды өшіресіз. Сіз сол қалталарды, оң жаққа жылжытуды немесе екеуін де тазалай аласыз:
анық: сол жаққа;
анық: оң;
анық: екеуі де;
Белгілі бір сипатты орнатқан кез келген элемент сол бағытқа айналдырылған элементтің астында көрсетіледі. Мысалы, осы мысалда мәтіннің алғашқы екі параграфы тазаланбайды, бірақ үшінші.
Түрлі орналасу әсерлерін алу үшін құжаттарыңыздағы әртүрлі элементтердің нақты мәнімен ойнаңыз.
Ең қызықты пішінді қондырғылардың бірі мәтіннің параграфтарымен бірге оң немесе сол жақ бағандағы суреттер сериясы. Мәтін кескінді айналдыру үшін жеткіліксіз болса да, алдыңғы кескіннің жанында емес, бағанда пайда болуын қамтамасыз ету үшін барлық кескіндерді тазалауға болады.
HTML (осы тармақты қайталаңыз):
Күдіксіз, өзіңізді қызықтыратын нәрселерді уақытша тоқтатыңыз. Cupidatat non proident емес, жұмыс істейді және жұмыс істейді.
CSS (суреттерді солға қарай айналдыру үшін):
img.float {float: сол;
анық: сол жаққа;
маржа: 5px;
}
Ал оң жақта:
img.float {float: оң;
анық: оң;
маржа: 5px;
}
Орналасу үшін Floats пайдалану
Жылжыту сипаты қалай жұмыс істейтінін түсінгеннен кейін, оны веб-беттеріңізді орналастыру үшін пайдалануды бастауға болады. Бұл өзгермелі веб-бетті жасау үшін жасалатын қадамдар:
- Орналастыруды (қағазға немесе графикалық құралға немесе менің басыма) жасаңыз.
- Бет бөлімшелерінің қайда орналасатынын анықтаңыз.
- Түрлі контейнерлердің енін және олардың ішіндегі элементтерді анықтаңыз.
- Барлығын бүкпеңіз. Тіпті сыртқы контейнер элементі солға қарай жылжиды, сол себепті браузер көрініс портына қатысты екенін білемін.
Орналасу бөлімдерінің енін (пайыздары жақсы) білетін болсаңыз, float сипатын оларды бетте көрсетілген жерлерге орналастыру үшін пайдалана аласыз. Жақсы нәрсе - Internet Explorer немесе Firefox үшін әртүрлі болып табылатын қорап үлгісіне қатысты алаңдатудың қажеті жоқ.