У Таилвинд ЦСС-у, замењени елементи су елементи чији је садржај замењен спољним ресурсом, као што су слике и видео снимци. Понекад се корисници суочавају са изазовом да позиционирају замењени елемент унутар контејнера. То је зато што ови елементи могу преплавити контејнер ако је њихова величина већа од доступног простора. Таилвинд ЦСС обезбеђује услужне класе за контролу како је садржај замењеног елемента позициониран и поравнат унутар контејнера.
Овај чланак ће илустровати метод за позиционирање замењених елемената унутар контејнера у Таилвинд ЦСС-у.
Како позиционирати замењене елементе унутар контејнера у Таилвинд?
Да бисте позиционирали замењене елементе унутар контејнера у Таилвинд-у, направите ХТМЛ програм и користите „ објекат-<позиција/страна> ” услужни програми са жељеним елементима. Потребно је дефинисати специфичну страну, тј. леву, десну или центар у услужном програму „објецт-<поситион/сиде>” да бисте позиционирали замењене елементе.
Синтакса
< елемент класа = 'објекат-<позиција/страна> ...' > ... елемент >
Пример
У овом примеру ћемо направити контејнер и користити све „ објекат-<позиција/страна> ” услужни програми са “ <имг> ” (имаге) елементи за навођење њихове замењене позиције у контејнеру:
< тело >
< див класа = 'бг-ски-300 грид грид-ровс-3 грид-флов-цол м-5 спаце-и-4 п-4 јустифи-бетвеен' >
< имг класа = 'објекат-нема објекта-лево-врх в-24 х-24 ми-4' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објекат-нема објекта-лево в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објекат-нема објекат-лево-доле в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објецт-ноне објецт-топ в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објекат-нема објекат-центар в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објекат-нема објекат-дно в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објекат-нема објекат-десно-горе в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објекат-нема објекат-десно в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
< имг класа = 'објекат-нема објекат-десно-доле в-24 х-24' срц = '637А6ЦЕББ39ДЦ3636110Д968Б0156351Ф411Ц09Ф' >
див >
тело >
Овде, у родитељском елементу <див>:
- “ бг-ски-300 ” класа поставља боју позадине контејнера <див> на небо.
- “ грид ” класа омогућава распоред мреже.
- “ грид-ровс-3 ” класа поставља број редова у мрежи на 3.
- “ грид-флов-цол ” класа дефинише ток ставки мреже у колонама.
- “ м-5 ” класа додаје 5 јединица маргине око контејнера.
- “ простор-и-4 ” класа додаје вертикални размак од 4 јединице између подређених <имг> елемената унутар контејнера.
- “ п-4 ” класа додаје 4 јединице допуна садржају унутар контејнера.
- “ оправдати-између ” класа поравнава подређене елементе унутар контејнера и равномерно их распоређује.
У елементима <имг>:
- “ објекат-нема ” класа не примењује никакву позицију на елемент и приказује елемент на његовој подразумеваној позицији у контејнеру.
- “ објекат-лево-врх ” класа поставља елемент <имг> у горњи леви угао свог контејнера.
- “ објекат-лево ” класа поравна елемент са левом ивицом контејнера и држи га вертикално у центру.
- “ објекат-лево-доле ” класа поставља елемент <имг> у доњи леви угао свог контејнера.
- “ објецт-топ ” класа поставља елемент на горњу ивицу свог контејнера и поставља га хоризонтално у центар.
- “ објекат-центар ” класа поставља елемент у центар контејнера и држи га хоризонтално и вертикално у центру.
- “ објекат-дно ” класа поставља елемент на доњу ивицу свог контејнера и држи га хоризонтално центрираним.
- “ објекат-десно-горе ” класа поставља елемент <имг> у горњи десни угао контејнера.
- “ објекат-право ” класа поставља елемент на десну ивицу свог контејнера и држи га вертикално у центру.
- “ објекат-десно-доле ” класа поставља елемент у доњи десни угао свог контејнера.
Излаз
На горњој веб страници може се приметити да је сав садржај замењеног елемента успешно позициониран.
Закључак
Да бисте позиционирали замењене елементе унутар контејнера у Таилвинд-у, „ објекат-<позиција/страна> ” се користе услужни програми са жељеним елементима, као што су слике. Корисници треба да дефинишу специфичну позицију или страну, тј. леву, десну или центар у услужном програму „објецт-<поситион/сиде>” да би позиционирали замењене елементе. Овај чланак је илустровао метод за позиционирање замењених елемената унутар контејнера у Таилвинд ЦСС-у.