Elementų išdėstymas tinklalapyje yra svarbus jo bendram dizainui. Nors yra kitų būdų, kaip įtakoti išdėstymą, pvz., Naudoti lenteles ( kurios mes nerekomenduojame ), geriausia naudoti CSS .
Žemiau apžvelgsime, kaip naudoti paprastą CSS stiliaus in-line savybę, kad būtų suderinti vaizdai, lentelės, pastraipos ir dar daugiau.
Pastaba: tie patys metodai gali būti naudojami ir išorinio stiliaus lapuose, tačiau kadangi jie taikomi atskiriems elementams ir gali tekti išlikti tokiu būdu, geriausia naudoti in-line stilių, kaip nurodyta toliau.
Suderinti teksto pastraipas
Antraštė žyma yra pirmoji vieta, kurioje galite pradėti kurti savo tinklalapį. Tai atidarymo ir uždarymo žymos atrodo taip:
Numatytas teksto derinimas pastraipoje yra kairėje puslapio pusėje, tačiau jūs taip pat galite sulyginti pastraipas į dešinę ir centrą.
Naudojant plūdės nuosavybę, galite sulyginti pastraipas iš tėvų elemento dešinėje arba kairėje. Visi elementai, esantys toje tėvų elemento viduje, tekės aplink išplėstą elementą.
Norėdami gauti geriausią rezultatą su pastraipa, geriausia nustatyti plotį, kuris yra mažesnis už konteinerio (tėvų) elementą.
Suderinti teksto viduje pastraipas
Gali būti, kad įdomiausias teksto išdėstymas yra "pateisinamas", o tai reiškia, kad naršyklė parodo tekstą, iš esmės suderintą su dešiniuoju ir kairiuoju lango kraštu.
Norint pateisinti pastraipos tekstą, turėtumėte naudoti teksto suderinimo savybę.
Jūs taip pat galite suderinti visą tekstą, esantį pastraipoje, dešinėje arba kairėje (pagal numatytuosius nustatymus) naudodami teksto suderinimo savybę.
Teksto suderinimo nuosavybė sulygins tekstą elemento viduje. Techniškai, jis neturėtų suderinti atvaizdų, esančių pastraipoje ar kitame elemente, tačiau dauguma naršyklių šį vaizdą naudoja kaip intarpą.
Vaizdų derinimas
Naudodami plūdės turtą vaizdo gairėje galite nustatyti paveikslėlių vietą puslapyje ir tai, kaip tekstas apvyniotų juos.
Kaip ir anksčiau pateiktos pastraipos, plūdės stiliaus savybė vaizdo tvirtinimo vietoje parodo jūsų paveikslėlį puslapyje ir nurodo naršyklę, kaip perkelti tekstą ir kitus elementus aplink tą vaizdą.
Tekstas po pirmiau pateiktos vaizdo žymos tekės aplink vaizdą dešinėje, kai vaizdas bus rodomas kairėje ekrano pusėje.
Jei noriu, kad tekstas nustotų supinti vaizdą, aš naudoju aiškų nuosavybę:
Suderinti daugiau nei pastraipos
Tačiau ką daryti, jei norite suderinti daugiau negu vieną pastraipą ar vaizdą? Kiekvienoje pastraipoje galite paprasčiausiai įvesti stiliaus savybę, tačiau yra žymos, kurią galite naudoti, kuri yra efektyvesnė:
Paprasčiausiai supraskite tekstą ir vaizdus (įskaitant HTML žymas ) su žyma ir stiliaus savybe (plūduriuojančiu arba teksto lygiu), o visa tai skyriuje bus suderinta, kaip jums to reikia.
Turėkite omenyje, kad išlyginimas bus pridėtas prie skyrių ar vaizdų, esančių skyriuje, bus įvykdytas, viršijant žymę.