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, tj. Tekstem, obrazem, tekstem itp.
Czasami możesz dodać tekst obok obrazu zamiast pod nim. Nazywa się to zawijaniem tekstu wokół obrazu. W rzeczywistości dość łatwo jest zawijać tekst za pomocą HTML. Pamiętaj, ż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 możesz, lepiej używać CSS, ponieważ jest on bardziej dostosowany do responsywnych projektów witryn.
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ć obrazek w lewo:
Twój tekst jest tutaj.
Jeśli chcesz, aby tekst pojawił się po lewej stronie, a obrazek po prawej stronie, zmień parametr wyrównania na "prawo".
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.
Twój tekst jest tutaj.
To jest to! 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ącego kodu CSS:
Twój tekst jest tutaj.
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ć spacje w prawo.
Zasadniczo, cztery liczby reprezentują NAJWYŻSZE DOLNE ODLOTY. Jeśli chcesz dodać spację do obrazu wyrównanego do prawej, możesz to zrobić:
Twój tekst jest tutaj.
W związku z tym dość proste jest użycie HTML do wykonania tego zadania, ale po raz kolejny może nie działać dobrze w przypadku witryn responsywnych.
Zawijanie tekstu wokół obrazu za pomocą CSS
Lepszym sposobem na zawijanie tekstu wokół obrazu jest użycie CSS. Zapewnia on dokładniejszą kontrolę ziarna nad pozycjonowaniem elementów i działa lepiej w połączeniu z nowoczesnymi standardami kodowania.
Mimo że umieściłem CSS bezpośrednio w tagu graficznym w przykładzie HTML, to już nigdy nie powinieneś tego robić. Zamiast tego powinieneś mieć osobny plik nazywany arkuszem stylów, który zawiera cały twój kod CSS.
W tagu IMG wystarczy przypisać do tagu klasę i nadać jej nazwę. W moim przykładzie nazwa klasy została pozostawiona . W moim arkuszu stylów wszystko, co muszę zrobić, to dodać następujący kod:
.left {float: left; dopełnienie: 0 10px 0 0;} Jak widać, dodałem 10 pikseli wypełnienia po prawej stronie obrazu wyrównanego do lewej. Użyłem także 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 znacznie czystsze niż dodanie całego kodu do samego tagu IMG. Łatwiej też zarządzać 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ć. Cieszyć się!
