Korzystając z właściwości float CSS, możesz unosić dowolny obraz po prawej stronie dowolnego tekstu, co widać po obrazku po prawej stronie tego tekstu. Aby to zrobić na swojej stronie internetowej, wykonaj poniższe kroki.

W tym przykładzie użyjemy zewnętrznego pliku CSS. Korzystając z zewnętrznego pliku CSS, można utworzyć pływający obraz na dowolnej stronie zawierającej łącze do pliku CSS. Zewnętrzne pliki CSS ułatwiają także zmianę jakichkolwiek ustawień, które możesz chcieć dostosować w przyszłości.

1. Utwórz plik CSS. Jeśli masz już plik CSS na swojej stronie internetowej, edytuj plik CSS i dodaj następujący kod.

2. Dodaj następujący kod do pliku CSS.

 .floatRight {float: right; margin-left: 20px} 

Wskazówka: Dodanie pływaka: lewy spowoduje, że obraz będzie się unosił po lewej stronie tekstu.

Jeśli chcesz mieć więcej niż jeden obraz pływający po prawej stronie, dodaj również następujący wiersz do pliku CSS.

 .floatRightClear {float: right; clear: right; margin-left: 20px} 

3. Po utworzeniu powyższego kodu zapisz plik CSS i wywołaj go z każdej strony HTML za pomocą kodu podobnego do poniższego przykładu. W naszym przykładzie nazwaliśmy plik CSS style.css.

4. Na koniec dodaj obraz do dowolnego obrazu, który chcesz umieścić po prawej stronie kontenera.