Zdjęcie z lewej lub prawej strony w HTML

Jak wstawić zdjęcie po lewej lub prawej stronie w HTML?

25 października 2022

Tworząc dokumenty tekstowe, bardzo często wstawiamy zdjęcia z jednej lub drugiej strony tekstu. W tym poradniku pokażę, w jaki sposób można zrobić to za pomocą HTML.

Jak to już bywa w kodowaniu, jeden efekt można osiągnąć na całe mnóstwo sposobów. Skupimy się jednak na jednym z najprostszych, czyli wykorzystaniu CSS w kodzie HTML za pomocą atrybutu style i wykorzystaniu właściwości float.

Aby umiejscowić obrazek po lewej stronie, wystarczy dodać do jego CSS następujący kod: float: left;.

Przykład:

<img src="https://webporady.pl/wp-content/uploads/wp-big.png" style="float: left; margin-right: 15px;"> Tekst z prawej strony
Obrazek po lewej stronie HTML

Aby umiejscowić obrazek po prawej stronie, analogicznie możemy skorzystać z float: right;.

Przykład:

Tekst z lewej strony <img src="https://webporady.pl/wp-content/uploads/wp-big.png" style="float: right; margin-left: 15px;">
Obrazek po prawej stronie w HTML

Oprócz tego możecie oczywiście dodawać kolejne właściwości CSS. Ja na przykład zmniejszyłem trochę obrazki za pomocą width: [wartość 0-100%], czyli np. width: 25%.

Jeżeli chcecie lepiej zrozumieć, jak działa float lub spróbować ułożyć to w wizualnym generatorze, mogę polecić Wam to narzędzie online.