Hvernig á að fljóta mynd til vinstri textans á vefsíðu

Notaðu CSS til að samræma mynd á vinstri hlið vefsíðunnar

Horfðu á nánast hvaða vefsíðu sem er í dag og þú munt sjá blöndu af texta og myndum sem eru hluti af þeim síðum. Það er mjög auðvelt að bæta við texta og myndum á síðu . Textinn er kóðaður með venjulegum HTML tags eins og málsgreinar, listi og fyrirsögn, en myndirnar eru með því að nota þáttinn .

Hæfni til að gera þessi texti og myndirnar virka vel saman er það sem setur mikla vefhönnuði í sundur! Þú vilt ekki bara að textinn þinn og myndirnar birtist hver á eftir öðru, þannig að þessi blokkarþættir verða sjálfgefið útlit. Nei, þú viljir hafa stjórn á því hvernig textinn og myndirnar flæða saman í því sem mun að lokum verða sjónræn hönnun vefsvæðis þíns.

Hafa mynd sem er takt við vinstri hlið síðu meðan texta þess síðu rennur í kringum hana er algeng hönnun við hönnun prentaðrar hönnun og einnig fyrir vefsíður. Í veftímum er þessi áhrif þekkt sem að flytja myndina . Þessi stíll er náð með CSS eigninni fyrir "flot". Þessi eign leyfir texta að flæða í kringum vinstri hliðina á hægri hlið. (Eða í kringum hægra megin mynd til vinstri hliðar.) Skulum skoða hvernig á að ná þessum sjónrænum áhrifum.

Byrjaðu með HTML

Það fyrsta sem þú þarft að gera er að hafa HTML til að vinna með. Fyrir dæmi okkar munum við skrifa textaritgerð og bæta við mynd í upphafi málsins (fyrir textann, en eftir opnun

tag). Hér er það sem HTML merkingin lítur út:

Textinn í málsgreininni fer hér. Í þessu dæmi höfum við mynd af höfuðmyndarmynd, svo þessi texti myndi líklega vera um þann sem höfuðmyndin er fyrir.

Sjálfgefið birtist vefsíðan okkar með myndinni fyrir ofan textann. Þetta er vegna þess að myndir eru blokkarþættir í HTML. Þetta þýðir að vafrinn birtir línuskil fyrir og eftir myndaratriðið sjálfgefið. Við munum breyta þessu sjálfgefna útlit með því að snúa okkur til CSS. Í fyrsta lagi munum við þó bæta við bekkjarvirði við myndarþáttinn okkar . Þessi flokkur mun virka sem "krók" sem við munum nota í CSS okkar síðar.

Textinn í málsgreininni fer hér. Í þessu dæmi höfum við mynd af höfuðmyndarmynd, svo þessi texti myndi líklega vera um þann sem höfuðmyndin er fyrir.

Athugaðu að þessi flokkur "vinstri" gerir ekkert yfirleitt á eigin spýtur! Fyrir okkur að ná okkar æskilegri stíl, þurfum við að nota CSS næst.

CSS Stíll

Með HTML okkar í stað, þar á meðal eigindin okkar "Vinstri", getum við nú snúið okkur til CSS. Við myndum bæta reglu við stílblað okkar sem myndi fljóta þessi mynd og bæta við smá púði við hliðina á því svo að textinn sem að lokum vefi í kringum myndina bætist ekki við það of náið. Hér er CSS sem þú getur skrifað:

.left {float: left; padding: 0 20px 20px 0; }

Þessi stíll flýgur myndina til vinstri og bætir við smá púði (með því að nota nokkrar CSS styttur) til hægri og neðst á myndinni.

Ef þú hefur skoðað síðuna sem inniheldur þetta HTML í vafra, þá myndar myndin nú til vinstri og textinn í málsgreininni virðist vera réttur með viðeigandi magni milli þeirra tveggja. Athugið að kennslugildi "vinstri" sem við notuðum er handahófskennt. Við gætum hafa kallað það neitt vegna þess að hugtakið "vinstri" gerir ekkert í sjálfu sér. Þetta þarf að hafa kennitölu í HTML sem virkar með raunverulegri CSS stíl sem ræður sjónrænum breytingum sem þú ert að leita að.

Aðrar leiðir til að ná þessum stílum

Þessi aðferð við að gefa myndarhlutanum bekkjargetu og síðan nota almenna CSS-stíl sem flýgur þátturinn er aðeins ein leið til að ná þessu "vinstri taktu mynd" útlit. Þú getur líka tekið bekkjarverðmæti af myndinni og stíll það með CSS með því að skrifa sértækari val. Til dæmis, skulum líta á dæmi þar sem þessi mynd er inni í deild með flokki gildi "aðal innihald".