Potrzebujesz kodu do zawijania tekstu wokół obrazu? Zwykle podczas tworzenia strony HTML wszystko odbywa się liniowo, co oznacza jeden blok bezpośrednio po drugim. Wszystkie moje poprzednie posty są tego przykładem, tzn. Tekstem, obrazem, tekstem itp.
Czasami możesz chcieć dołączyć tekst obok obrazu zamiast pod nim. Nazywa się to zawijaniem tekstu wokół obrazu. W rzeczywistości dość łatwo jest zawijać tekst za pomocą HTML. Zauważ, że nie musisz używać CSS w celu zawijania tekstu.
Jednak obecnie W3C zaleca używanie CSS zamiast HTML do tego rodzaju zadań. Wymienię obie metody poniżej, ale jeśli to możliwe, lepiej używać CSS, ponieważ jest on bardziej dostosowany do responsywnych projektów stron internetowych.
Zawijanie tekstu wokół obrazu za pomocą HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Aby zawinąć tekst wzdłuż prawej strony obrazu, musisz wyrównać obraz w lewo:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Jeśli chcesz, aby tekst pojawił się po lewej stronie, a obrazek po prawej stronie, zmień parametr wyrównania na "prawy".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
To wszystko! Całkiem proste, prawda? Jedynym czasem, w którym chcesz użyć CSS, jest dodanie marginesów do zdjęć, aby między tekstem a obrazem było trochę miejsca.
Możesz dodać marginesy do obrazu, używając następujący kod stylizacji CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Powyższy kod wykorzystuje element CSS MARGIN, aby dodać 10 pikseli białych znaków po prawej stronie obrazu. Ponieważ wyrównaliśmy pozostawiony obraz, chcemy dodać białe znaki z prawej strony.
Zasadniczo, cztery liczby reprezentują NAJWYŻSZĄ DOLNĄ DOLNĘ W LEWO. Więc jeśli chcesz dodać białą spację do wyrównanego do prawej strony, możesz to zrobić:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Więc dość łatwo jest użyć HTML do wykonania tego zadania, ale raz Ponownie może nie działać dobrze w przypadku witryn responsywnych.
Oblewanie tekstem wokół obrazu za pomocą CSS
Lepszym sposobem na zawijanie tekstu wokół obrazu jest użycie CSS. Daje to lepszą kontrolę nad pozycjonowaniem elementów i działa lepiej z nowoczesnymi standardami kodowania.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Mimo że umieściłem CSS bezpośrednio w tagu graficznym w przykładzie HTML Naprawdę już nie powinieneś tego robić. Zamiast tego powinieneś mieć osobny plik nazywany arkuszem stylów, który zawiera cały twój kod CSS.
W znaczniku IMG wystarczy przypisać do tagu klasę i nadać jej nazwę. W moim przykładzie nazwałem klasę po lewej. W moim arkuszu stylów wystarczy dodać następujący kod:
.left {
float: left;
padding: 0 10px 0 0;}
Jak widzisz, dodałem 10 pikseli wypełnienia po prawej stronie obrazu wyrównanego do lewej strony . Użyłem również właściwości float, aby przenieść obraz z normalnego przepływu dokumentu i umieścić go na lewej stronie kontenera nadrzędnego.
Jak widać, jest o wiele czystszy niż dodawanie całego tego kodu do samego znacznika IMG. Jest także łatwiejsze w zarządzaniu i można użyć znacznie więcej właściwości CSS, aby dostosować wygląd strony. Jeśli masz jakieś pytania, możesz je skomentować. Ciesz się!