Како да пловете некоја слика на правото на текст

Оваа петминутна туториал објаснува како

Дали сте заинтересирани да научите како да плови со слика на правото на текст? Ако е така, не си сам. Постојат многу ситуации каде што програмерите сакаат сликата на веб-страница да се појави во текстот со текстот што тече или се завиткува околу него. За среќа, манипулирањето со сликите е слично со манипулирањето на текстот, па ако имате искуство со второто, овој процес воопшто не треба да биде тежок.

Всушност, со CSS float сопственост, лесно е да се плови вашата слика десно од текстот и да го протекуваат текстот околу неа на левата страна . Користете ја оваа петминутна туториал за да дознаете како.

Да започнеме

За да започнете, напишете став од текст и додадете слика на почетокот на пасусот. Ова треба да се направи пред текстот, но по ознаката

:

Duis aute irure dolor sed do eiusmod за време на инцидентот во reprehenderit во voluptate. Купидатот не е парен, а лабава и долна магла. Сонцето во секојдневниот живот е исклучено. Mollit ајд id est laborum.

Следно, додадете атрибут на стилот на сликата и примени го својството float:

style = "float: right;" />

Вашиот текст ќе биде ублажен во однос на сликата, па додадете некои маргини на сликата за полесно да ги прочитате:

margin: 0 5px 0 0; " />

Маргинското стенографско својство ги применува маргините во горниот ред, десно, долу и лево ( TRBL ).

Завиткување

И тоа го прави. Сега гледате дека лебдечката слика на десната страна воопшто не е тешка. Вие исто така може да бидете заинтересирани за лебдење на сликата лево и пловење до центарот. Додека првиот потег е можен, за жал не можете да плови со слика до центарот, бидејќи тоа обично бара распоред на две колони.