Jak zawijać tekst wokół obrazu?

Użyj CSS do zawijania tekstu na obrazach

Co wiedzieć

• Dodaj swój obraz do strony internetowej, wyłączając wszelkie cechy wizualne. Możesz także dodać klasę do obrazu, na przykład lewy lub prawo .
• Wchodzić .left { zmiennoprzecinkowy: lewy; padding: 0 20px 20px 0;} do arkusza stylów, aby użyć właściwości „float” CSS. (Posługiwać się prawo aby wyrównać obraz do prawej.)
• Jeśli przeglądasz swoją stronę w przeglądarce, zobaczysz, że obraz jest wyrównany do lewej strony strony, a tekst zawija się wokół niego.

W tym artykule wyjaśniono, jak używać CSS do umieszczania obrazów na stronie, a następnie otaczania ich tekstem.

Jak korzystać z CSS, aby tekst opływał obraz?

Właściwy sposób na zmianę układu tekstu i obrazów na stronie oraz wyglądu ich stylów wizualnych w przeglądarce to CSS . Pamiętaj tylko, że skoro mówimy o wizualnej zmianie na stronie (sprawienie, by tekst opływał obraz), oznacza to, że jest to domena Kaskadowych Arkuszy Stylów.

1. Najpierw dodaj swój obraz do swojej strony internetowej. Pamiętaj, aby wykluczyć wszelkie cechy wizualne (takie jak wartości szerokości i wysokości) z tego kodu HTML. Jest to ważne, szczególnie w przypadku responsywnej strony internetowej, w której rozmiar obrazu będzie się różnić w zależności od przeglądarki. Niektóre programy, takie jak Adobe Dreamweaver, dodają informacje o szerokości i wysokości do obrazów wstawianych za pomocą tego narzędzia, więc pamiętaj, aby usunąć te informacje z kodu HTML! Pamiętaj jednak, aby dołączyć odpowiedni tekst alternatywny.

   
   
   

2. Do celów stylizacji możesz również dodać klasę do obrazu. Ta wartość klasy jest tym, czego użyjemy w naszym Plik CSS . Zauważ, że wartość, której tu używamy, jest dowolna, chociaż w przypadku tego konkretnego stylu zwykle używamy wartości „lewo” lub „prawo”, w zależności od tego, w jaki sposób chcemy wyrównać nasz obraz. Uważamy, że ta prosta składnia działa dobrze i jest łatwa do zrozumienia dla innych, którzy w przyszłości będą musieli zarządzać witryną, ale możesz nadać jej dowolną wartość klasy.

   |_+_|

   Sama ta wartość klasy nic nie da. Obraz nie zostanie automatycznie wyrównany do lewej strony tekstu. W tym celu musimy teraz przejść do naszego pliku CSS.

   
   
   

3. W swoim arkuszu stylów możesz teraz dodać następujący styl:

   |_+_| |_+_| |_+_| |_+_|

   To, co tutaj zrobiłeś, to użycie właściwości CSS „float”, która wyciągnie obraz z normalnego przepływu dokumentu (sposób, w jaki normalnie wyświetlałby się obraz, z tekstem wyrównanym pod nim) i wyrówna go do lewej strony jego kontenera . Tekst, który pojawia się po nim w znaczniku HTML, jest teraz zawijany wokół niego. Dodaliśmy również kilka wartości dopełnienia, aby ten tekst nie znajdował się bezpośrednio na obrazie. Zamiast tego będzie miał ładne odstępy, które będą atrakcyjne wizualnie w projekcie strony. W skrócie CSS dotyczącym dopełniania, dodaliśmy wartości 0 do górnej i lewej strony obrazu oraz 20 pikseli na jego lewą i dolną część. Pamiętaj, że musisz dodać dopełnienie po prawej stronie wyrównanego do lewej obrazu. Obraz wyrównany do prawej (który za chwilę przyjrzymy się) miałby zastosowanie dopełnienia po lewej stronie.

4. Jeśli przeglądasz swoją stronę internetową w przeglądarce, powinieneś teraz zobaczyć, że Twój obraz jest wyrównany do lewej strony strony, a tekst ładnie się wokół niego owija. Innym sposobem na powiedzenie tego jest to, że obraz „unosi się w lewo”.

5. Jeśli chciałbyś zmienić ten obrazek, aby był wyrównany do prawej (jak w przykładzie zdjęcia, który towarzyszy temu artykułowi), byłoby to proste. Po pierwsze, musisz upewnić się, że oprócz stylu, który właśnie dodaliśmy do naszego CSS dla wartości klasy 'left', mamy również styl dla wyrównania do prawej. Wyglądałoby to tak:

   
   
   |_+_| |_+_| |_+_| |_+_|

   Widać, że jest to prawie identyczne jak w pierwszym CSS, który napisaliśmy. Jedyną różnicą jest wartość, której używamy dla właściwości 'float' i używane przez nas wartości dopełnienia (dodając trochę po lewej stronie naszego obrazu zamiast po prawej).

6. Na koniec zmienisz wartość klasy obrazu z „lewo” na „prawo” w swoim kodzie HTML:

   
   
   |_+_|

7. Spójrz teraz na swoją stronę w przeglądarce, a obraz powinien być wyrównany do prawej strony, a tekst ładnie go otacza. Mamy tendencję do dodawania obu tych stylów, „lewego” i „prawego” do wszystkich naszych arkuszy stylów, aby móc używać tych stylów wizualnych w razie potrzeby podczas tworzenia stron internetowych. Te dwa style stają się przyjemnymi funkcjami wielokrotnego użytku, z których możemy skorzystać, gdy potrzebujemy stylizować obrazy z zawijaniem tekstu wokół nich.

Użyj HTML zamiast CSS (i dlaczego nie powinieneś tego robić)

Mimo że możliwe jest zawijanie tekstu wokół obrazu za pomocą HTML, standardy sieciowe dyktują, że CSS (i kroki przedstawione powyżej) jest drogą do zrobienia, abyśmy mogli zachować separację struktury (HTML) i stylu (CSS).

Jest to szczególnie ważne, gdy weźmiesz pod uwagę, że w przypadku niektórych urządzeń i układów ten tekst może nie trzeba opływać obraz. W przypadku mniejszych ekranów układ strony responsywnej może wymagać, aby tekst rzeczywiście był wyrównany pod obrazem, a obraz rozciągał się na całą szerokość ekranu. Można to łatwo zrobić za pomocą zapytania medialne jeśli Twoje style są oddzielone od znaczników HTML.

W dzisiejszym świecie wielu urządzeń, w którym obrazy i tekst będą wyglądać inaczej dla różnych odwiedzających i na różnych ekranach, ta separacja jest niezbędna do długoterminowego sukcesu i zarządzania stroną internetową.

Tagi HTML a style CSS

Dodawanie tekstu i obrazów do stron internetowych jest łatwe. Tekst jest dodawany ze standardem Tagi HTML jak akapity, nagłówki i listy, podczas gdy obrazy są umieszczane na stronie z elementem.

Jednak po dodaniu obrazu do strony internetowej możesz chcieć umieścić tekst obok obrazu, zamiast wyrównywać go pod nim (jest to domyślny sposób, w jaki obraz dodany do kodu HTML będzie renderowany w przeglądarce).

Technicznie rzecz biorąc, istnieją dwa sposoby na osiągnięcie tego wyglądu: za pomocą CSS (zalecane) lub dodając instrukcje wizualne bezpośrednio do kodu HTML (niezalecane, ponieważ chcesz zachować separację stylu i struktury witryny).