Pokud vás zajímá naučit se plovoucí obrázek napravo od textu, je to docela jednoduchý úkol. Existuje mnoho situací, kdy programátoři chtějí, aby se obrázek na webové stránce zobrazoval uvnitř textu s textem plynoucím nebo zalomeným kolem něj. Manipulace s obrázky je podobné manipulaci s textem, takže pokud s ním máte zkušenosti, tento proces by neměl být vůbec náročný.
Ve skutečnosti je díky vlastnosti CSS float snadné plovoucí obrázek vpravo od textu a nechat text kolem něj levá strana. V tomto pětiminutovém výukovém programu se dozvíte, jak na to.
Nastavení rozvržení pomocí funkce Float
Toto základní rozvržení vytvoří prostor pro váš text a plovoucí obrázek napravo od tohoto textu. Tato rozvržení se jistě mohou zkomplikovat, ale tento příklad vám ukáže základní princip práce s floatem a textem.
Za předpokladu, že již máte dokument HTML, se kterým pracujete, a samostatnou šablonu stylů CSS, začněte vytvořením nového divu, který bude fungovat jako řádek obsahující váš plovoucí prvek.
Dejte tomuto novému divu dvě třídy, kontejner a clearfix. Existuje spousta způsobů, jak to zvládnout, a jména jsou zcela na vaší volbě, ale pomohou vám zůstat v organizaci a vytvořit si rozvržení.
-
Ve svém CSS definujte, jak chcete, aby se váš kontejner vešel do vašeho celkového rozvržení. Tento příklad z něj udělá celou šířku řádku.
.kontejner {
šířka: 100%;
výška: 25rem;
} -
Dále se postarejte o třídu clearfix. Čistá oprava je nutná, protože float může ve vašem rozložení vytvořit nějaké zvláštní závady. Definování vlastnosti „overflow“ v clearfixu zastaví plovoucí prvky z krvácení z určeného prostoru.
.clearfix {
přepad: auto;
} -
Nyní můžete vytvořit prvek v kontejneru div a plavat jej doprava. Pokud obtékáte text kolem obrázku, bude to váš obrázek. Vytvořte prvek a přidělte mu třídu pro vlastnost float.
-
Vytvořte třídu pro svůj plovák. Pravděpodobně budete chtít také hodit nějaký styling, pokud budete dělat více identických prvků. V opačném případě můžete pro styling použít samostatnou třídu.
.float-right {
float: správně;
šířka: 300px;
výška: 200px;
barva pozadí: červená;
marže: 0 0 0,5rem 0,5rem
} -
Pokud chcete zalomit text kolem tohoto prvku s plovoucím povrchem, vložte text nyní. Umístěte jej kamkoli do kontejneru, před nebo za plovoucí prvek.
Nějaký text
Více textu
...a tak dále.
-
Obnovte svou stránku a podívejte se na výsledek.
Balení
A to je vše. Nyní vidíte, že plovoucí obrázek vpravo není vůbec obtížný. Také by vás mohlo zajímat plovoucí obrázek vlevo a plovoucí uprostřed. Zatímco první tah je možný, bohužel nemůžete obraz plovoucí do středu, protože by to obvykle vyžadovalo rozložení ve dvou sloupcích.