Използвайте CSS Align Left, за да плавате изображение на уебсайт вляво от текста

Елементи на ниво блок в уеб страница се появяват в последователен ред. За да подобрите външния вид или полезността на страницата, можете да промените този ред чрез опаковане на блокове, включително изображения, така че текстът тече около изображения.

От гледна точка на уеб дизайна, този ефект е известен като плаващо изображение. Това се постига с CSS свойствоплувка, което позволява на текста да тече около изображението, подравнено вляво в дясната му страна (или около изображението, подравнено вдясно от лявата му страна).

Започнете с HTML

Този пример добавя изображение в началото на абзац (преди текста, но след отварянето

таг). Ето първоначалното HTML маркиране:

Текстът на параграфа е тук. В този пример имаме изображение на снимка на снимка, така че този текст може да опише човека в снимката.

По подразбиране страницата ще се покаже с изображението над текста, тъй като изображенията са елементи на ниво блок в HTML. Това означава, че браузърът показва прекъсвания на редове преди и след елемента на изображението по подразбиране. За да промените този облик по подразбиране с помощта на CSS, добавете стойност на класа (

наляво) към елемента на изображението, за да служи като кука, към която могат да се прикачат свойства.

Текстът на параграфа е тук. В този пример имаме изображение на снимка на снимка, така че този текст може да опише човека в снимката.

Имайте предвид, че този клас не прави нищо самостоятелно. CSS ще постигне желания стил.

Добавяне на CSS стилове

Добавете това правило към сайта таблица със стилове:

.наляво {
плувка: ляво;
подплата: 0 20px 20px 0;
}

Този стил плава с класа наляво вляво от страницата и добавя малко подплата вдясно и отдолу на изображението, така че текстът да не се допира до него.

В браузър изображението вече ще бъде подравнено вляво; текстът ще се появи вдясно с интервал между двете.

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

Можете също така да премахнете стойността на класа от изображението и да го оформите с CSS, като напишете по-специфичен селектор. В примера по-долу изображението е вътре в разделение с a главно съдържание стойност на класа.

Текстът на параграфа е тук. В този пример имаме изображение на снимка на снимка, така че този текст може да опише човека в снимката.

За да оформите това изображение, напишете този CSS:

.main-content img { 
плувка: ляво; 
подплата: 0 20px 20px 0;
}

В този сценарий изображението е подравнено вляво, като текстът се носи около него както преди, но без допълнителната стойност на класа в маркировката. Правейки това в мащаб може да помогне за създаването на по-малък HTML файл, който ще бъде по-лесен за управление и може да подобри производителността.

Избягвайте вградени стилове

И накрая, можете да използвате вградени стилове:

Текстът на параграфа е тук. В този пример имаме изображение на снимка на снимка, така че този текст може да опише човека в снимката.

Това обаче не е препоръчително, тъй като съчетава стила на даден елемент с неговата структурна маркировка. Най-добрите практики повеляват стилът и структурата на страницата да останат отделни. Тази сегрегация е особено полезна, когато трябва да промените оформлението на страницата и да потърсите различни размери на екрана и устройства с реагиращ уебсайт.