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.