Sut i Ffatri Delwedd i'r Chwith Testun ar dudalen we

Defnyddio CSS i alinio delwedd i ochr chwith Cynllun gwefan

Edrychwch ar bron unrhyw dudalen we heddiw a byddwch yn gweld cyfuniad o destunau a thestunau sy'n gwneud y rhan fwyaf o'r tudalennau hynny. Mae'n hawdd iawn ychwanegu testun a delweddau i dudalen . Caiff y testun ei godau gan ddefnyddio tagiau HTML safonol fel paragraffau, rhestrau a penawdau, tra bod y delweddau wedi'u cynnwys gan ddefnyddio'r elfen .

Mae'r gallu i wneud y testun hwnnw a'r delweddau hynny yn cydweithio'n dda yw'r hyn sy'n gosod dylunwyr gwe gwych ar wahân! Nid ydych am i'ch testun a'ch delweddau ymddangos yn un ar ôl y llall, a dyna sut y bydd yr elfennau lefel bloc hyn yn eu gosod yn ddiofyn. Na, rydych chi eisiau rhywfaint o reolaeth dros sut mae'r testun a'r delweddau'n llifo gyda'i gilydd yn yr hyn a fydd yn y pen draw yn ddyluniad gweledol eich gwefan.

Mae cael delwedd sy'n cyd-fynd ag ochr chwith tudalen tra bod testun y dudalen honno yn llifo o'i gwmpas yn driniaeth ddylunio gyffredin ar gyfer dylunio printiedig a hefyd ar gyfer tudalennau gwe. Ar delerau gwe, gelwir yr effaith hon yn symud y ddelwedd . Cyflawnir yr arddull hon gydag eiddo CSS ar gyfer "arnofio". Mae'r eiddo hwn yn caniatáu i destun llifo o gwmpas y delwedd chwith-alinio i'r ochr dde. (Neu o amgylch delwedd ar y dde i'r ochr chwith.) Edrychwn ar sut i gyflawni'r effaith weledol hon.

Dechreuwch Gyda HTML

Y peth cyntaf y bydd angen i chi ei wneud yw cael rhywfaint o HTML i weithio gyda hi. Er enghraifft, byddwn yn ysgrifennu paragraff o destun ac yn ychwanegu delwedd ar ddechrau'r paragraff (cyn y testun, ond ar ôl y tag

agoriadol). Dyma beth mae'r marcio HTML yn ei hoffi:

Mae testun y paragraff yn mynd yma. Yn yr enghraifft hon, mae gennym ddelwedd o lun headshot, felly byddai'r testun hwn yn debygol o fod yn ymwneud â'r person y mae'r headshot ar ei gyfer.

Yn ddiofyn, byddai ein gwefan yn dangos gyda'r ddelwedd uwchben y testun. Mae hyn oherwydd bod delweddau yn elfennau lefel bloc yn HTML. Golyga hyn fod y porwr yn dangos seibiannau llinell cyn ac ar ôl yr elfen ddelwedd yn ddiofyn. Byddwn yn newid yr edrychiad diofyn hwn trwy droi at CSS. Yn gyntaf, fodd bynnag, byddwn yn ychwanegu gwerth dosbarth i'n elfen ddelwedd . Bydd y dosbarth hwnnw'n gweithredu fel "bachyn" y byddwn yn ei ddefnyddio yn ein CSS yn ddiweddarach.

Mae testun y paragraff yn mynd yma. Yn yr enghraifft hon, mae gennym ddelwedd o lun headshot, felly byddai'r testun hwn yn debygol o fod yn ymwneud â'r person y mae'r headshot ar ei gyfer.

Sylwch nad yw'r dosbarth hwn o "chwith" yn gwneud dim o gwbl ar ei phen ei hun! I ni i gyflawni ein steil dymunol, mae angen i ni ddefnyddio CSS nesaf.

Styles CSS

Gyda'n HTML ar waith, gan gynnwys ein priodoldeb dosbarth o "chwith", gallwn nawr droi at CSS. Byddem yn ychwanegu rheol i'n taflen arddull a fyddai'n arnofio'r ddelwedd honno a hefyd yn ychwanegu padyn bach yn ei le fel na fydd y testun a fydd, yn y pen draw, yn gwagio'r ddelwedd yn dal yn ei erbyn yn rhy agos. Dyma'r CSS y gallwch chi ei ysgrifennu:

.left {fflôt: chwith; padio: 0 20px 20px 0; }

Mae'r arddull hon yn fflachio'r ddelwedd honno i'r chwith ac yn ychwanegu padyn bach (gan ddefnyddio rhai llawlyfr CSS) i dde a gwaelod y ddelwedd.

Os ydych wedi adolygu'r dudalen sy'n cynnwys y HTML hwn mewn porwr, byddai'r ddelwedd nawr yn cael ei alinio i'r chwith a byddai testun y paragraff yn ymddangos yn iawn iddo gyda swm priodol o le rhwng y ddau. Nodwch fod gwerth dosbarth y "chwith" a ddefnyddiwyd gennym yn fympwyol. Gallem fod wedi ei alw'n rhywbeth oherwydd nad yw'r term "chwith" yn gwneud dim ar ei phen ei hun. Mae angen iddi gael priodoldeb dosbarth yn yr HTML sy'n gweithio gyda steil CSS gwirioneddol sy'n pennu'r newidiadau gweledol yr ydych yn bwriadu eu gwneud.

Ffyrdd Amgen i Gyflawni'r Dulliau hyn

Mae'r dull hwn o roi'r elfen delwedd yn briodwedd dosbarth ac yna'n defnyddio arddull CSS gyffredinol sy'n llosgi'r elfen yn un ffordd y gallech chi gyflawni'r "ddelwedd wedi'i alinio chwith" hon yn unig. Gallech hefyd werthu'r ddelwedd i'r gwerth dosbarth a'i arddullio â CSS trwy ysgrifennu dewiswr mwy penodol. Er enghraifft, gadewch i ni edrych ar enghraifft lle mae'r ddelwedd honno o fewn is-adran gyda gwerth dosbarth "prif gynnwys".