Як плавае малюнак злева ад тэксту на вэб-старонцы

Выкарыстанне CSS для выраўноўвання малюнка на левым баку макета вэб-старонкі

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

Магчымасць зрабіць гэты тэкст і гэтыя выявы добра працуюць разам, што адрознівае вялікі вэб-дызайнераў адзін ад аднаго! Вы не проста хочаце , каб ваш тэкст і малюнкі з'яўляюцца адзін за адным, што , як гэтыя блокавыя элементы будуць макет па змаўчанні. Не, вы хочаце некаторы кантроль над тым, як тэкст і малюнкі зліваюцца ў тым, што ў канчатковым выніку будзе візуальны дызайн вашага сайта.

Маючы малюнак, выраўнаваны па левай баку старонкі , а тэкст гэтай старонкі абцякае гэта звычайная апрацоўка дызайн для друкаванай канструкцыі , а таксама для вэб - старонак. У вэб умовах, гэты эфект вядомы як плывец вобраз . Гэты стыль дасягаюцца з уласцівасцю CSS для «паплаўка». Гэта ўласцівасць дазваляе тэксту абгарнуць малюнак выраўноўваецца па левым краі з правага боку. (Або вакол правай выраўнаваныя малюнка на левай баку). Давайце паглядзім на тое, як дасягнуць гэтага візуальнага эфекту.

Пачніце з HTML

Першае, што вам трэба зрабіць, гэта мець некаторы HTML для працы. Для нашага прыкладу мы напішам абзац тэксту і дадаць малюнак у пачатку абзаца (перад тэкстам, але пасля тэга адкрыцця <р>). Вось што гэта HTML разметка выглядае наступным чынам:

Тэкст пункта ідзе тут. У гэтым прыкладзе мы маем вобраз стрэл у галаву фота, так што гэты тэкст, верагодна, будзе пра чалавека, якога стрэл у галаву для.

Па змаўчанні, наш вэб-старонка будзе адлюстроўвацца з выявай над тэкстам. Гэта адбываецца таму, што выявы з'яўляюцца блокавымі элементамі ў HTML. Гэта азначае, што браўзэр адлюстроўвае разрывы радкоў да і пасля элемента малюнка па змаўчанні. Мы зменім гэты від па змаўчанні, звярнуўшыся да CSS. Ва- першае, тым ня менш, мы дадамо значэнне класа да нашага элементу малюнка . Гэты клас будзе выступаць у якасці «крука», які мы будзем выкарыстоўваць яе ў нашым CSS пазней.

Тэкст пункта ідзе тут. У гэтым прыкладзе мы маем вобраз стрэл у галаву фота, так што гэты тэкст, верагодна, будзе пра чалавека, якога стрэл у галаву для.

Звярніце ўвагу, што гэты клас «левы» не робіць нічога па сабе! Для нас , каб дасягнуць жаданага стылю, мы павінны выкарыстоўваць CSS у наступным.

стылі CSS

З нашага HTML на месцы, у тым ліку нашага класа атрыбуту «налева», мы можам зараз перайсці да CSS. Мы хацелі б дадаць правіла ў нашу табліцу стыляў , якая будзе ўсплываць гэты вобраз , а таксама дадаць трохі водступаў побач з ім так, каб тэкст , які будзе ў канчатковым рахунку , абгарнуць вакол малюнка не бадацца супраць яго занадта блізка. Вось CSS, вы можаце напісаць:

.left {поплавковый: злева; абіўка: 0 20px 20px 0; }

Гэты стыль плавае , што малюнак злева і дадае крыху водступаў ( з дапамогай CSS стэнаграфія) справа і ўнізе малюнка.

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

Альтэрнатыўныя спосабы дасягнення гэтых стыляў

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