Kod HTML do owinięcia tekstu wokół obrazu

Potrzebujesz kodu, aby owinąć tekst wokół obrazu? Zwykle, gdy tworzysz stronę HTML, wszystko płynie liniowo, co oznacza jeden blok bezpośrednio po drugim. Wszystkie moje poprzednie posty są tego przykładem, ja.mi. tekst, potem obraz, potem tekst itp.

Czasami możesz podać tekst obok obrazu zamiast go poniżej. Nazywa się to owijającym tekst wokół obrazu. W rzeczywistości dość łatwo jest owinąć tekst za pomocą HTML. Pamiętaj, że nie musisz używać CSS, aby owinąć tekst.

LoreM ipsum dolor sit amet, konsektoniczny adipiscing elit. Fusce dictum grawida enim, quis ultricies mauris posuere quis. DUIS Abiscing Tincidunt Sagittis. Cum socjis natoquus penatibus et Magnis dis porwie Montes, Nastutur Ridiculus Mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. UT Pellenesque nunc w LoreM egestas non imperdiet enim congue.

Aby mieć owinięcie tekstu wzdłuż prawej strony obrazu, musisz wyrównać zdjęcie w lewo:

 
LoreM ipsum dolor sit amet, konsektoniczny adipiscing elit. Fusce dictum grawida enim, quis ultricies mauris posuere quis. DUIS Abiscing Tincidunt Sagittis. Cum socjis natoquus penatibus et Magnis dis porwie Montes, Nastutur Ridiculus Mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. UT Pellenesque nunc w LoreM egestas non imperdiet enim congue.
 
 
Mimo że w przykładzie HTML zawarłem CSS bezpośrednio do znacznika obrazu, naprawdę już nigdy nie powinieneś tego robić. Zamiast tego powinieneś mieć osobny plik o nazwie arkusz stylów, który przechowuje cały kod CSS.
 
W znaczniku IMG po prostu przypisujesz klasę do znacznika i nadajesz jej nazwę. W moim przykładzie nazwałem klasę lewy. W moim arkuszu stylów wszystko, co muszę zrobić, to dodać następujący kod:
 
.lewy float: lewy; Wyściółka: 0 10px 0 0;
 
Jak widać, dodałem 10px wyściółki po prawej stronie obrazu wyrównanego po lewej stronie. Użyłem również właściwości Float, aby wyprowadzić obraz z normalnego przepływu dokumentu i umieścić go po lewej stronie kontenera nadrzędnego.
 
Jak widać, jest to znacznie czystsze niż dodanie całego tego kodu do samego znacznika IMG. Jest również łatwiejsze do zarządzania i możesz użyć znacznie więcej właściwości CSS, aby dostosować wygląd na swojej stronie internetowej. Jeśli masz jakieś pytania, skomentuj. Cieszyć się!