Как да плъзнете изображение отляво на текста в уеб страница

Използване на CSS за подравняване на изображение в лявата част на оформлението на уеб страница

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

Способността да направите този текст и тези изображения да работят добре заедно е това, което отличава страхотните уеб дизайнери! Не искате просто текстът и изображенията ви да се появяват един след друг, което по подразбиране ще оформят елементите на ниво блок . Не, искате някакъв контрол върху това, как текстът и изображенията се обединяват в това, което в крайна сметка ще бъде визуалният дизайн на уебсайта Ви.

Разполагането на изображение, което е подравнено с лявата страна на страницата, докато текстът на тази страница се разпространява около нея, е общоприет дизайн за обработка на печатен дизайн, а също и за уеб страници. В уеб термини, този ефект е известен като плаващи изображението . Този стил се постига с CSS свойството за "float". Тази характеристика позволява текстът да се движи около лявата подравнена снимка в дясната му страна. (Или около дясното изображение вляво). Нека да разгледаме как да постигнем този визуален ефект.

Започнете с HTML

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

). Ето как изглежда този HTML маркер:

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

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

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

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

CSS стилове

С нашия HTML код на място, включително нашия клас атрибут "ляво", вече можем да се обърнем към CSS. Бихме добавили правило към стиловата ни таблица, която би плавала на това изображение, а също така и към него щеше да се добави малко подложка, така че текстът, който в крайна сметка ще се увие около изображението, не се приближава твърде много. Ето CSS, който можете да напишете:

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

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

Ако сте прегледали страницата, съдържаща този HTML в браузър, изображението вече ще е подравнено вляво, а текстът на абзаца ще се появи вдясно с подходящо разстояние между двете. Обърнете внимание, че класовата стойност на "лявата", която използвахме, е произволна. Можехме да го наречем нищо, защото терминът "ляво" не прави нищо сам. Това трябва да има атрибут на класа в HTML, който работи с действителен стил на CSS, който диктува визуалните промени, които искате да направите.

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

Този подход, при който елементът на изображението е атрибут на класа, и след това с помощта на общ стил на CSS, който плува елемента, е само един начин да постигнете този вид "ляво подравнено изображение". Можете също така да изключите класовата стойност на изображението и да го оформите с CSS, като напишете по-конкретен селектор. Например, нека разгледаме един пример, в който това изображение е вътре в разделение с класова стойност на "основно съдържание".