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

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

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;">

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.