Ако сте заинтересовани за учење лебдења слике десно од текста, то је прилично једноставан задатак. Много је ситуација у којима програмери желе да се слика на веб страници појави унутар текста са текстом који се протеже или обавија око ње. Манипулирање сликама је слично манипулисању текстом, па ако имате искуства са потоњим, овај процес уопште не би требао бити тежак.
У ствари, са својством ЦСС флоат, лако је лебдети слику десно од текста и пустити да се текст креће око ње на лева страна. Користите овај петоминутни водич да бисте научили како.
Постављање распореда са пловком
Овај основни изглед створиће простор за ваш текст и лебдећу слику десно од тог текста. Свакако, ови распореди могу бити сложенији, али овај пример ће вам показати основни принцип рада са флоатом и текстом.
Под претпоставком да већ имате ХТМЛ документ са којим радите и засебну ЦСС табелу стилова, започните стварањем новог див-а који ће деловати као ред који садржи ваш плутајући елемент.
Дајте том новом див две класе, контејнер и цлеарфик. Постоји много начина да се то реши, а имена су у потпуности ваш избор, али они ће вам помоћи да останете организовани и успоставите изглед.
-
У ЦСС-у дефинишите како желите да се ваш контејнер уклапа у ваш целокупан изглед. Овај пример ће само направити ред пуне ширине.
.контејнер {
ширина: 100%;
висина: 25рем;
} -
Затим се побрините за класу цлеарфик. Цлеарфик је неопходан јер флоат може створити неке чудне грешке у вашем распореду. Дефинисање својства „оверфлов“ у цлеарфик-у зауставља исцуривање плутајућих елемената из њиховог одређеног простора.
.цлеарфик {
прелив: ауто;
} -
Сада можете да креирате елемент у вашем див контејнера и да га плутате удесно. Ако омотавате текст око слике, ово би била ваша слика. Направите елемент и дајте му класу за својство флоат.
-
Направите класу за свој пловак. Вероватно ћете желети да убаците и ту неки стајлинг ако правите више идентичних елемената. У супротном, можете да примените засебну класу за свој стил.
. флоат-ригхт {
лебди: десно;
ширина: 300пк;
висина: 200пк;
боја позадине: црвена;
маржа: 0 0 0.5рем 0.5рем
} -
Ако желите да омотате текст око тог плутајућег елемента, убаците га сада. Ставите га било где у контејнеру, било пре или после плутајућег елемента.
Неки текст
Још текста
...и тако даље.
-
Освежите своју страницу и погледајте резултат.
Окончање
И то је то. Сад видите да лебдење слике удесно уопште није тешко. Можда ће вас такође занимати плутање слике улево и лебдење у средину. Иако је први потез могућ, нажалост, слику не можете пребацити у центар, јер би то обично захтевало распоред у две колоне.