.

Lygiavimo atributas yra gana universalus ir gali būti taikomas ne tik pagrindiniam tekstui, bet ir panašioms antraštėms

. 1 pavyzdyje parodyta, kaip tokiu atveju nustatyti lygiavimą.

1 pavyzdys: teksto lygiavimas

Kaip pagauti liūtą?

surašymo metodas

Dykumą suskirstome į keletą elementarių skyrių, kurių dydis sutampa su bendrais liūto matmenimis, bet yra mažesnis už narvo dydį. Toliau, atlikdami paprastą surašymą, nustatome sritį, kurioje yra liūtas, o tai automatiškai veda prie jo gaudymo.

dichotomijos metodas

Dykumą padaliname į dvi dalis. Vienoje dalyje yra liūtas, kitoje nėra. Paimame pusę, kurioje yra liūtas, ir vėl padalijame per pusę. Taip kartojame, kol liūtas pagaunamas.

Pavyzdžio rezultatas parodytas fig. vienas.

Ryžiai. 1. Lygiuokite tekstą į dešinę ir į kairę

Šiame pavyzdyje antraštė sulygiuota su naršyklės lango centru, pasirinkta pastraipa lygiuojama dešinėje, o pagrindinis tekstas – kairėje.

Šiame straipsnyje apžvelgsime, kaip sulygiuoti vaizdą į dešinę ir į kairę naudojant css svetainėje.

kaip teisingai sulygiuoti vaizdą css

Ypatybė „float:right“ naudojama norint išlygiuoti vaizdą dešinėje. Savybė plūduriuoti pakeičia vaizdo (ar kito elemento) vaizdą į bloką, bet su ypatumais: jis tampa nematomas kitiems bloko elementams, bet tuo pačiu išsaugo matomumą mažosioms raidėms (display: inline) elementams, kurie apgaubia jį.

Ši funkcija leidžia sulygiuoti vaizdą į dešinę ir į kairę css, taip pat kitus elementus prie krašto, nenaudojant lentelių ir daug papildomo kodo. Išsamią informaciją apie tai, kaip veikia ši nuosavybė, galite rasti „float css“ paieškos sistemose.

Kai vaizdas pasislenka, tekstas ir kiti elementai pradeda glaudžiai apvynioti jį ir daugeliu atvejų atrodo negražiai, todėl jie prideda paraštes naudodami ypatybę „margin y1 x1 y2 x2“. Reikšmės „y1 x1 y2 x2“ yra atitinkamai viršuje, dešinėje, apačioje ir kairėje.

Neteisingai rodomi plūduriuojantys elementai

Kaip minėta pirmiau, į plūduriuojančius elementus neatsižvelgiama, nes jie yra nematomi, kad blokuotų žymas, todėl gali būti rodomas neteisingas:

1 atvejis: plūduriuojantis elementas tęsiasi už pirminio sluoksnio ribų.

2 atvejis: Pavadinimas ir kitas bloko elemento turinys nerodomas naujoje eilutėje, bet pradedamas apvynioti aplink pirminį elementą su tipu float .

Kaip ištaisyti netinkamą plūduriuojančių elementų rodymą

Norėdami išspręsti aukščiau aprašytą problemą, turite nurodyti slankiojo elemento užbaigimo ribas. Kadangi slankiųjų elementų nematoma blokuoti elementus, turite naudoti papildomą žymą, kuri jų neapvyniotų.

CSS yra aiški savybė, atsakinga už tai, kad plūduriuojantys elementai neapvyniotų. Išvalyta ypatybė perkelia elementą iš karto po plūduriuojančia žyma, taip nustatydama apatinę kraštinę ir, jei reikia, išplečiant pirminį bloką iki visų plūduriuojančių žymų pabaigos.

Galite naudoti bet kurią bloko žymą kaip kraštinės plėtiklį su skaidriu.

Aiški savybė gali turėti šias reikšmes:

• nė vienas- įjungti srautą;
• paliko- srauto draudimas kairėje pusėje;
• teisingai- srauto draudimas dešinėje pusėje;
• tiek- srauto draudimas iš abiejų pusių.

Dažniausia žyma, naudojama kraštinei pratęsti iki slankiojo bloko galo, yra
, taip pat galite naudoti

jokio vidinio turinio.

kairėje lygiuoti vaizdą css

Galite lygiuoti vaizdą į kairįjį kraštą css, kaip ir į dešinę, tik vietoj float: dešinėje , float: kairėje rašoma, o vietoj įtraukos nuo kairiojo krašto, įtrauka iš dešinės nustatoma naudojant paraštės savybę .

Pavyzdžiai

HTML kodo, skirto CSS vaizdo lygiavimui dešinėje pusėje, pavyzdys (aiškus nereikia)

Rezultatas naršyklėje

Puslapio kodas (aiškios savybės nereikia)

Aukščiau pateiktame pavyzdyje vaizdas prispaustas prie dešiniojo krašto ir jo kairioji paraštė yra 15 pikselių.

Pavyzdys html kodas, kaip sulygiuoti vaizdą į dešinę CSS formatu (jei norite išplėsti kraštą, reikia aiškumo)

Rezultatas naršyklėje

Aukščiau pateiktame pavyzdyje ypatybė "border:4px solid #cccccc;" reiškia, kad kraštinė būtų 4 pikselių storio, o spalva #cccccc ir užpildymas: 10 pikselių yra div žymos užpildymas 10 pikselių.

HTML kodo pavyzdys, kaip sulygiuoti vaizdą į kairę css (norint išplėsti kraštą, reikia aiškumo)

Rezultatas naršyklėje

Puslapio kodas (su aiškia savybe)

Paukščiai

Žuvis

Čia galite patalpinti tekstą...

Aukščiau pateiktame pavyzdyje vaizdas paspaustas į kairę, o viršuje ir dešinėje yra 15 pikselių užpildymas.

Iki šiol aš, kaip ir daugelis iš jūsų, naudojau du būdus:

1. Pirmasis būdas yra pagrįstas plūdės savybe. Kairysis blokas nustatytas plūduriuoti: kairysis, dešinysis blokas nustatytas plūduriuoti: dešinėje
2. Antrasis būdas yra absoliučiai nustatyti dešinįjį bloką su parametrais dešinėje: 0 arba kairėje: 100%, paraštės kairėje: -(bloko plotis)

Pagrindinis abiejų metodų trūkumas yra tas, kad jei blokus reikia išlyginti išilgai apatinės kraštinės arba išilgai vidurinės linijos vienas kito atžvilgiu, tada blokus reikia perkelti vertikaliai pasirinkimo metodu, nustatant juos viršuje: bet kokia reikšmė arba paraštė. -viršuje: bet kokiaValue. Ir pirmasis metodas, plius viskas, turi dar vieną, ne tiek trūkumą, kiek nemalonią smulkmeną. Tai yra būtinybė išvalyti srautą naudojant clearFix "a, perpildymą arba papildomą div.
Taigi metodas numeris 3. Pirma, kodas:

Tinkamas HTML

kopijuoti šaltinį | Nukopijuokite HTML

1. < div class ="wrap">
2. < div class ="left">< a href ="#">Kairysis blokas< div class ="right">< a href ="#">dešinysis blokas

Tinkamas CSS

kopijuoti šaltinį | Nukopijuokite HTML

1. .wrap(
2. plotis: 500px
3. fonas : #555 ;
4. aukštis: 500 pikselių;
5. .kairė Dešinė (
6. ekranas: eilutinis blokas;
7. //display: inline;
8. // mastelio keitimas: 1;
9. plotis: 100%
10. paraštė-dešinė : -100% ;
11. vertikalus lygiavimas : apačioje ;
12. .right(
13. teksto lygiavimas: dešinėn ;
14. .left a , .right a (rodymas: eilutinis blokas; padėtis: santykinis;)
15. .left a (plotis: 200 piks.; aukštis: 100 piks.; fonas: žalias;)
16. .right a (plotis: 100 piks.; aukštis: 200 piks.; fonas: rožinis;)

Paaiškinimai

Metodo esmė yra perdengti blokus vieną ant kito naudojant margin-right: -100% ir sulygiuoti dešiniojo bloko turinį į dešinę naudojant text-align: right.
Patartina abu blokus (dešinę ir kairę) rašyti vienoje eilutėje, kitaip dėl eilutės lūžio simbolio dešinysis blokas šiek tiek išlįs iš pirminio bloko ribų.
Nuorodos turi būti nustatytos į padėtį: santykinė, kitu atveju dėl persidengiančių blokų kai kurios gali būti nepaspaudžiamos.

Metodo privalumai

Pagrindinis pliusas yra tas, kad dabar mūsų blokams pradeda veikti vertikalus lygiavimas. Ir mes galime juos nesunkiai sulygiuoti tiek viršutinėje, tiek apačioje ir centre.

Metodo trūkumai

Ir pagrindinis trūkumas yra tas, kad naudojant šį metodą, turime būti tvirtai įsitikinę, kad blokų turinys nepadidės tiek, kad jie pradėtų vienas kitą persidengti (beje, metodas su plūdėmis neturi šio trūkumo , nes didinant blokelių turinį jie stovės vienas po kito).

P.S.

Internete tokio metodo nemačiau, todėl prašau: jei kas rastų panašų straipsnį, paskelbtą anksčiau, praneškite.

Upd.

Komentaruose mano dėmesys buvo atkreiptas į metodą naudojant teksto lygiavimą: pateisinti. Šis metodas taip pat geras, tačiau turi du trūkumus. Pirma, norint imituoti paskutinę teksto bloko eilutę, reikalingas papildomas elementas, antra, jis neveiks IE6-IE7 bloko lygio elementams.