Потребан вам је код за преношење текста око слике? Обично када креирате ХТМЛ страницу, све тече линеарно, што значи један блок непосредно иза другог. Сви моји претходни постови су примјер тога, тј. Текст, затим слика, затим текст, итд.
Понекад ћете можда желети да укључите текст поред слике уместо испод слике. То се назива умотавање текста око слике. Заправо је прилично лако преломити текст помоћу ХТМЛ-а. Имајте на уму да не морате да користите ЦСС да бисте замотали текст.
Међутим, ових дана В3Ц препоручује кориштење ЦСС-а умјесто ХТМЛ-а за ове врсте задатака. Споменут ћу оба метода у наставку, али ако можете, боље је користити ЦСС јер је прилагодљивији дизајну веб страница.
Преломи текст око слике помоћу ХТМЛ-а
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Фусце дицтум гравида еним, куис ултрициес маурис посуере куис. Дуис адиписцинг тинцидунт сагиттис. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Аликуам а фелис витае аугуе лобортис дицтум. Цурабитур молестие посуере лаореет. Утемељите нунц у лорем егестас нон импердиет еним цонгуе.
Да бисте текст пребацили дуж десне стране слике, морате поравнати слику на лево:
Ваш текст иде овде.
Ако желите да се текст појави на левој страни и да се слика појави на десној страни, само промените параметар поравнања у „десно“.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Фусце дицтум гравида еним, куис ултрициес маурис посуере куис. Дуис адиписцинг тинцидунт сагиттис. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Аликуам а фелис витае аугуе лобортис дицтум. Цурабитур молестие посуере лаореет. Утемељите нунц у лорем егестас нон импердиет еним цонгуе.
Ваш текст иде овде.
То је то! Прилично лако? Једини пут када бисте хтели да користите ЦСС је да желите да додате маргине сликама, тако да постоји простор између текста и слике.
Маргине можете додати слици користећи следећи ЦСС код:
Ваш текст иде овде.
Горњи код користи МАРГИН ЦСС елемент за додавање 10 пиксела размака на десној страни слике. Пошто смо поравнали слику лево, желимо да додамо размак десно.
У основи, четири броја представљају ТОП РИГХТ БОТТОМ ЛЕФТ. Дакле, ако желите да додате белу површину слици која је поравнана удесно, урадићете ово:
Ваш текст иде овде.
Стога је прилично једноставно користити ХТМЛ за извођење овог задатка, али још једном, можда неће добро функционирати за осјетљиве локације.
Врап Тект Ароунд Имаге користећи ЦСС
Бољи начин за преношење текста око слике је коришћење ЦСС-а. То вам даје бољу контролу зрна у односу на позиционирање елемената и ради боље са модерним стандардима кодирања.
Иако сам укључио ЦСС директно у ознаку слике у ХТМЛ примјеру, стварно то више не би требало да радите. Уместо тога, требало би да имате засебну датотеку под називом стилски стил који садржи све ваше ЦСС кодове.
У ИМГ тагу, једноставно доделите класи ознаци и дајте јој име. У мом примеру сам назвао класу лево . У мом стилу, све што треба да урадим је да додам следећи код:
.лефт {флоат: лево; паддинг: 0 10пк 0 0;} Као што можете видјети, додао сам 10пк паддинг-а на десну страну лијево поравнате слике. Такође сам користио својство флоат да померим слику из нормалног тока документа и ставим је на леву страну родитељског контејнера.
Као што видите, много је чишће од додавања тог кода у саму ИМГ ознаку. Такође је лакше управљати и можете користити много више ЦСС својстава да бисте прилагодили изглед ваше веб странице. Ако имате било каквих питања, слободно коментирајте. Уживати!
