Како да пливате слика лево од текстот на веб-страница

Користење на CSS за усогласување на сликата на левата страна на изгледот на веб страницата

Погледни речиси секоја веб-страница денес и ќе видите комбинација на текст и слики што го сочинуваат најголемиот дел од тие страници. Многу е лесно да додадете текст и слики на страница . Текстот е кодиран со користење на стандардни HTML тагови како параграфи, листи и наслови, додека сликите се вклучени со помош на елементот .

Способноста да се направи тој текст и тие слики да работат добро заедно е она што поставува одлични веб дизајнери! Вие не само сакате вашиот текст и слики да се појавуваат еден по друг, тоа е како овие елементи на блок ниво ќе распоред по дифолт. Не, сакате некоја контрола врз тоа како текстот и сликите течат заедно во она што на крајот ќе биде визуелен дизајн на вашиот веб-сајт.

Има слика која е усогласена на левата страна на страницата додека текстот на таа страница тече околу него е заеднички дизајн третман за печатени дизајн, а исто така и за веб страници. Во веб-термини, овој ефект е познат како подвижна слика . Овој стил се постигнува со сопственост на CSS за "плови". Овој својство овозможува текстот да тече низ сликата во лево подредена на десната страна. (Или околу десната слика на левата страна.) Ајде да погледнеме како да се постигне овој визуелен ефект.

Започнете со HTML

Првото нешто што ќе треба да направите е да имате некој HTML со кој ќе работите. За нашиот пример, ние ќе напишеме став од текст и ќе додадеме слика на почетокот од став (пред текстот, но по отворањето

таг). Еве што изгледа како HTML изглед:

Текстот на ставот оди овде. Во овој пример, имаме слика на фотографија од headshot, така што овој текст најверојатно ќе биде за личноста за која е насловот на глава.

Стандардно, нашата веб страница ќе се прикаже со сликата над текстот. Ова е затоа што сликите се елементи на блок ниво во HTML. Ова значи дека прегледникот стандардно ги прикажува прекините на линијата пред и по елементот на сликата. Ние ќе го смениме овој стандарден изглед со претворање во CSS. Прво, сепак, ние ќе додадеме класа вредност на нашиот елемент на сликата . Таа класа ќе делува како "јадица" што ќе ја користиме во нашиот CSS подоцна.

Текстот на ставот оди овде. Во овој пример, имаме слика на фотографија од headshot, така што овој текст најверојатно ќе биде за личноста за која е насловот на глава.

Имајте на ум дека оваа класа "лево" не прави ништо! За да го постигнеме саканиот стил, треба да го користиме следното CSS .

CSS стилови

Со нашиот HTML во место, вклучувајќи го и нашиот класен атрибут на "лево", сега можеме да се свртиме кон CSS. Ние ќе додадеме правило на нашиот стилски лист кој ќе ја плови таа слика и исто така додаде малку дополнување веднаш до него, така што текстот што во крајна линија ќе се заокружи околу сликата, не претерува премногу против него. Тука е CSS што можете да го напишете:

.left {float: лево; Соочувајќи се: 0 20px 20px 0; }

Овој стил ја плови таа слика лево и додава малку проследување (со користење на некое стенографија на CSS) на десно и на дното на сликата.

Ако ја разгледате страницата која го содржи овој HTML во прелистувачот, сликата сега ќе биде усогласена лево и текстот на пасусот ќе се појави десно надолу со соодветен износ на проред помеѓу двете. Забележете ја класната вредност на "лево" што ја користевме е произволна. Ние би можеле да го наречеме нешто, бидејќи терминот "лево" не прави ништо самостојно. Ова треба да има атрибут на класа во HTML кој работи со вистински CSS стил кој ги диктира визуелните промени што ги барате.

Алтернативни начини за постигнување на овие стилови

Овој пристап на давање на елементот на сликата атрибут на класа, а потоа со користење на општ стил на CSS кој го плови елементот е само еден начин да го постигнете изгледот на "лева порамнета слика". Можете исто така да ја намалите вредноста на класата на сликата и да стилизирате со CSS со пишување поспецифичен селектор. На пример, да го разгледаме примерот каде што таа слика е внатре во поделбата со класа вредност на "главната содржина".