Jak otoczyć obraz tekstem przy użyciu HTML lub CSS

Domyślnie przeglądarka wyświetla obraz powyżej lub poniżej otaczającego go tekstu, pozostawiając wolne miejsce po bokach. Powoduje to marnowanie przestrzeni i sprawia, że zdjęcie wygląda odłączone od treści. Aby tekst owijał się wokół obrazu, możesz użyć prostego atrybutu HTML lub reguły CSS.

HTML

Krok 1

Otwórz plik HTML w edytorze tekstu i znajdź znacznik <img>. Wstaw wewnątrz niego atrybut align= i otwórz cudzysłów:

<img src="obraz.jpg" align="…">

Krok 2

Wpisz jedną z wartości: left, right, top, middle lub bottom.

• left – tekst po prawej stronie obrazu,
• right – tekst po lewej stronie,
• top – tekst zaczyna się od górnej krawędzi obrazu,
• middle – tekst wyrównany do środka obrazu,
• bottom – tekst zaczyna się od dolnej krawędzi obrazu.

Po wstawieniu odpowiedniej wartości zapisz plik.

CSS

Krok 1

W tym samym znaczniku <img> dodaj atrybut style przed zamknięciem nawiasu:

<img src="obraz.jpg" style="…">

Krok 2

Wpisz właściwość float: i wybierz left lub right.

• float:left – obraz po lewej, tekst po prawej,
• float:right – obraz po prawej, tekst po lewej.

Zapisz zmiany w dokumencie.

URL:https://pl.whycomputer.com/oprogramowanie/100304875.html