Computer help - file server


[ Blog ] - [ File Server ] - [ Удаленная компьютерная помощь ]

Патрэбен код, каб абгарнуць тэкст вакол выявы? Звычайна пры стварэнні HTML-старонкі ўсё цячэ лінейна, што азначае адзін блок непасрэдна за другім. Усе мае папярэднія паведамленні з'яўляюцца прыкладам гэтага, гэта значыць тэкст, потым малюнак, потым тэкст і г. д.

Часам вы можаце ўключыць тэкст побач з выявай, а не пад ім. Гэта называецца абкручваннем тэксту вакол выявы. На самай справе даволі лёгка абгарнуць тэкст з дапамогай HTML. Звярніце ўвагу, што вам не трэба выкарыстоўваць CSS для пераносу тэксту.



Аднак у нашы дні W3C рэкамендуе выкарыстоўваць CSS замест HTML для такіх задач.Я згадаю абодва спосабу ніжэй, але калі вы можаце, лепш выкарыстоўваць CSS, паколькі ён больш прыстасаваны да спагадных дызайнаў сайтаў. Абгарнуць тэкст вакол малюнка з дапамогай HTML



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis адыгрывае алавяна-сагітыс. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet.Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Для таго, каб тэкст перайшоў у правы бок выявы, вы павінны выраўнаваць малюнак па левым краі:

Ваш тэкст ідзе сюды.

Калі вы хочаце, каб тэкст з'яўляўся злева, а малюнак - зусім справа, проста зменіце параметр выраўноўвання на "справа".



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis.Duis адыгрывае алавяна-сагітыс. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Ваш тэкст ідзе сюды.

Вось і ўсё! Даволі лёгка, так? Адзіны раз, калі вы хочаце выкарыстоўваць CSS, - калі вы хочаце дадаць палі да малюнкаў, каб паміж тэкстам і малюнкам заставалася прастора.

Вы можаце дадаць палі да выявы, выкарыстоўваючы наступны код стылю CSS:

Ваш тэкст ідзе сюды.

Прыведзены вышэй код выкарыстоўвае элемент MARGIN CSS для дадання 10 пікселяў прабелу ў правым баку малюнка. Паколькі мы выраўнавалі малюнак па левым краі, мы хочам дадаць прабел справа.

Па сутнасці, чатыры лічбы ўяўляюць ВЕРХ ПРАВА ВНІШ УЛЕВА. Такім чынам, калі вы хочаце дадаць прабел да выраўнаванага па правым малюнку, вы павінны зрабіць гэта:

Ваш тэкст ідзе сюды.

Такім чынам, выкарыстаць HTML для выканання гэтай задачы даволі проста, але яшчэ раз, ён можа не падысці для спагадных сайтаў.Абкручванне тэксту вакол малюнка з дапамогай CSS

Лепшы спосаб абгарнуць тэкст вакол выявы - выкарыстанне CSS. Гэта дазваляе вам больш дакладна кантраляваць размяшчэнне элементаў і лепш працаваць з сучаснымі стандартамі кадавання.

Нягледзячы на ​​тое, што я ўключыў CSS непасрэдна ў тэг выявы ў прыкладзе HTML, вы сапраўды ніколі гэтага больш не павінны рабіць. Замест гэтага ў вас павінен быць асобны файл, які называецца табліца стыляў, які змяшчае ўвесь ваш код CSS.

У тэгу IMG вы проста прызначаеце клас тэгу і даяце яму імя.У сваім прыкладзе я назваў клас, які застаўся. У маёй табліцы стыляў мне трэба толькі дадаць наступны код: .left {float: left; padding: 0 10px 0 0;}

Як бачыце, я дадаў 10px padding ў правы бок выявы, выраўнаванай па левым краі. Я таксама выкарыстаў уласцівасць float, каб перамясціць малюнак з звычайнага патоку дакумента і змясціць яго ў левы бок бацькоўскага кантэйнера.

Як бачыце, гэта значна чысцей, чым даданне ўсяго гэтага кода ў сам тэг IMG. Ім таксама прасцей кіраваць, і вы можаце выкарыстоўваць нашмат больш уласцівасцей CSS, каб наладзіць знешні выгляд вашай вэб-старонкі.Калі ў вас ёсць якія-небудзь пытанні, не саромейцеся каментаваць. Атрымлівайце асалоду!

.
SETUP UA COMPUTER BLOG