Sužinokite, kaip apvynioti tekstą aplink slankiojantį vaizdą naudojant CSS.
Jei norite, kad tekstas apvyniotų vaizdą dešinėje, kaip ir nuotraukoje, pristatančioje šį straipsnį, naudokite tokią CSS taisyklę:
Plūduriavimo: kairės taisyklės vaizdas perkeliamas į kairę paraštę. Dešinės užpildymo taisyklė neleidžia tekstui atsitrenkti į dešinę vaizdo pusę. Jei prie šio vaizdo būtų pridėta kraštinė, tarp vaizdo ir kraštinės atsirastų užpildymas. Norėdami dirbti su vaizdu su apvadu, žr. 2 skyrių.
Tada pridėkite paraštes paveikslėlio kairėje ir dešinėje, kad jis būtų centre. Tinkama kairiosios ir dešiniosios paraščių reikšmė, norint ką nors centruoti, yra automatinė.
Norėdami sukurti storą, į rėmelį panašų kraštelį, naudodami griovelio kraštinės stilių, galima naudoti tokią taisyklę:
Kiti kraštinių stiliai yra vientisos, punktyrinės, brūkšninės, dvigubos, įdubos, įdėtos ir pradinės. Plotis gali būti išreikštas pikseliais, ems arba procentais.
Kraštines galima pasirinktinai pritaikyti vaizdo viršuje, dešinėje, apačioje ir kairėje. Šias žinias galite panaudoti norėdami sukurti tokį efektą kaip šešėlis.
Naudodami vientisą 2 pilkų atspalvių kraštą dešinėje ir apatinėje kraštinėje, gausite šešėlių efektą.
img { float: left; kraštinė-dešinė-stilius: vientisas; kraštinė-dešinė-plotis: 8px; kraštinė-dešinė-spalva: #CCCCCC; kraštinės-apačios-stilius: tvirtas; kraštinės-apačios-plotis: 8px; kraštinė-apačios spalva: #999999; paraštė-dešinė: 1em; paraštė-apačia: 1em; }
Patarimas
Jei turite vaizdų daugiau nei viename puslapio skyriuje (div), naudokite palikuonių parinkiklius, kad sukurtumėte jų stilių atskirai. Galimi parinkikliai: #content img, #sidebar img, #feature img.
