Ако се интересувате да научите как да плувате изображение вдясно от текста, това е доста проста задача. Има много ситуации, при които програмистите искат изображение на уеб страница да се появи вътре в текста с текст, който тече или се увива около него. Манипулиране на изображения е подобно на манипулирането на текст, така че ако имате опит с последния, този процес изобщо не би трябвало да е труден.
Всъщност, със свойството CSS float е лесно да плувате изображението си вдясно от текста и да го обтекате на лява страна. Използвайте този петминутен урок, за да научите как.
Настройване на оформление с поплавък
Това основно оформление ще създаде пространство за вашия текст и ще плува изображение вдясно от този текст. Разбира се, тези оформления могат да станат по-сложни, но този пример ще ви покаже основния принцип зад работата с плувка и текст.
Ако приемем, че вече имате HTML документ, с който работите, и отделен CSS лист със стилове, започнете, като създадете нов div, който да действа като реда, съдържащ вашия плаващ елемент.
Дайте на този нов div два класа, контейнер и clearfix. Има много начини да се справите с това и имената са изцяло ваш избор, но те ще ви помогнат да останете организирани и да установите оформлението си.
-
Във вашия CSS дефинирайте как искате контейнерът ви да се побере в общото ви оформление. Този пример просто ще го направи ред с пълна ширина.
.контейнер {
ширина: 100%;
височина: 25рем;
} -
След това се погрижете за класа на clearfix. Ясната корекция е необходима, защото float може да създаде някои странни проблеми в оформлението ви. Дефинирането на свойството "overflow" в ясната корекция спира плаващите елементи от кървене от определеното им пространство.
.clearfix {
преливане: автоматично;
} -
Сега можете да създадете елемент във вашия контейнер div и да го плавате надясно. Ако обвивате текст около изображение, това ще бъде вашето изображение. Създайте елемента и му дайте клас за свойството float.
-
Създайте класа за вашия флоат. Вероятно ще искате да хвърлите малко стил и там, ако ще правите по-идентични елементи. В противен случай можете да приложите отделен клас за вашия стил.
.float-right {
плувка: вдясно;
ширина: 300px;
височина: 200px;
цвят на фона: червен;
марж: 0 0 0,5 рем 0,5 рем
} -
Ако искате да увиете текст около този плаващ елемент, вмъкнете текста си сега. Поставете го навсякъде в контейнера, преди или след плаващия елемент.
Някакъв текст
Още текст
...и така нататък.
-
Опреснете страницата си и проверете резултата.
Обобщавайки
И това го прави. Сега виждате, че плаването на изображение вдясно изобщо не е трудно. Може да се интересувате и от плаващо изображение вляво и плаващо в центъра. Докато първото преместване е възможно, за съжаление не можете да преместите изображение в центъра, тъй като това обикновено изисква оформление с две колони.