இந்த கட்டுரை CSS ஐப் பயன்படுத்தி நடைமுறை எடுத்துக்காட்டுகளுடன் ஒரு div இன் சரியான சீரமைப்பைக் காட்டுகிறது.
- CSS ஐப் பயன்படுத்தி ஒரு Div ஐ எப்படி வலது சீரமைப்பது?
- 'ஃப்ளோட்' சொத்தைப் பயன்படுத்துதல்
- 'சரியான' சொத்தைப் பயன்படுத்துதல்
- ஃப்ளெக்ஸ் அமைப்பைப் பயன்படுத்துதல்
- கிரிட் அமைப்பைப் பயன்படுத்துதல்
CSS ஐப் பயன்படுத்தி ஒரு Div ஐ எப்படி வலது சீரமைப்பது?
இணையதளத்தை மிகவும் கவர்ச்சிகரமானதாக மாற்றும் வகையில் டெவலப்பர் ஒவ்வொரு டிவிட் உறுப்பு அல்லது படத்தையும் சரியாக சீரமைக்க முடியும். அவற்றின் அதிக நெகிழ்வுத்தன்மையின் காரணமாக, பக்கப் பிரிவுகளை வரையறுத்தல், நெடுவரிசைகளை உருவாக்குதல் மற்றும் தொடர்புடைய உள்ளடக்கத்தின் தொகுப்புகளை மடக்குதல் போன்ற பல வழிகளில் div கூறுகளை வலைப்பக்கத்தில் பயன்படுத்தலாம்.
div ஐ வலது சீரமைக்க பின்வரும் முறைகளைப் பின்பற்றவும்:
முறை 1: 'ஃப்ளோட்' சொத்தைப் பயன்படுத்துதல்
HTML கோப்பில், ஒரு div ஐ உருவாக்கி அதற்கு ஒரு வகுப்பை ஒதுக்கவும் align-to-right ”. இந்தக் கட்டுரை முழுவதும் இந்த வகுப்பும் divம் பயன்படுத்தப்படுகின்றன.
< div வர்க்கம் = 'சரி-இருந்து-வலது' >
< ப > இது சில உள்ளடக்கம். < / ப >
< / div >
இப்போது, அந்த DIV வகுப்பைத் தேர்ந்தெடுக்கவும் ' align-to-right ” மற்றும் CSS பண்புகளை ஒதுக்கவும். இந்த பண்புகள் சிறந்த காட்சிப்படுத்தலுக்குப் பயன்படுத்தப்படுகின்றன:
.அலைன்-இருந்து-வலது {
மிதவை: வலது;
திணிப்பு: 10px;
பின்னணி - நிறம் : சூடான இளஞ்சிவப்பு;
}
மேலே உள்ள குறியீட்டில், ' மிதவை 'சொத்து வலதுபுறம் அமைக்கப்பட்டுள்ளது. இது வலைப்பக்கத்தில் டிவையை சரியான திசையில் மிதக்கிறது அல்லது நகர்த்துகிறது. திணிப்பு மற்றும் பின்னணி வண்ண பண்புகள் ' 10px 'மற்றும்' சூடான இளஞ்சிவப்பு ' முறையே.
மேலே உள்ள குறியீடு துணுக்கை தொகுத்த பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:
மேலே உள்ள வெளியீடு div சரியான திசையில் நகர்கிறது என்பதை உறுதிப்படுத்துகிறது.
முறை 2: 'சரியான' சொத்தைப் பயன்படுத்துதல்
CSS இல், div வகுப்பைத் தேர்ந்தெடுத்து, ' சரி ”பண்பு 0 க்கு. இது வலது பக்கத்திலிருந்து தேர்ந்தெடுக்கப்பட்ட div இன் தூரம் பூஜ்ஜியத்திற்கு சமமாக இருப்பதை உறுதி செய்கிறது. பின்னர், அமைக்கவும் நிலை 'சொத்து' அறுதி 'டிவ் நிலையை சரி செய்ய. முடிவில், சிறந்த காட்சிப்படுத்தலுக்கு சில ஸ்டைலிங் பண்புகளைப் பயன்படுத்தவும்:
.அலைன்-இருந்து-வலது{
வலது: 0 ;
நிலை: முழுமையான;
திணிப்பு: 10px;
பின்னணி - நிறம் : நடுத்தர ஊதா;
}
குறியீட்டை இயக்கிய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:
வெளியீடு இப்போது div சரியாக சீரமைக்கப்பட்டுள்ளது என்பதைக் காட்டுகிறது.
முறை 3: ஃப்ளெக்ஸ் அமைப்பைப் பயன்படுத்துதல்
ஃப்ளெக்ஸ் மிகவும் திறமையான முறையாகும், மேலும் இது சாளரத்தின் மறுஅளவிடுதலின் போது தளவமைப்பைப் பராமரிக்கிறது. CSS ஐப் பயன்படுத்தி div வலது சீரமைக்கப்படலாம் ' ஃப்ளெக்ஸ் லேஅவுட் 'பண்புகள். ஃப்ளெக்ஸ் தளவமைப்பு பல்வேறு நோக்கங்களுக்காக பல பண்புகளைக் கொண்டுள்ளது.
HTML கோப்பில் ஒரு பெற்றோர் டிவியை உருவாக்கவும், அதன் உள்ளே இரண்டு உடன்பிறப்புகளை உருவாக்கவும். மேலும், ஒவ்வொரு பிரிவுக்கும் ஒரு தனிப்பட்ட வகுப்பை ஒதுக்கவும்:
< div வர்க்கம் = 'சரி-இருந்து-வலது' >< div வர்க்கம் = 'இடது சீரமைக்கப்பட்ட' >
< ப > இது இன்னும் சில உள்ளடக்கம் .< / ப >
< / div >
< div வர்க்கம் = 'வலது சீரமைக்கப்பட்ட' >
< h1 > Linuxhint இலிருந்து வணக்கம் < / h1 >
< / div >
< / div >
இப்போது உள்ளே ' <பாணி> 'குறிச்சொல் பின்வரும் CSS பண்புகளைச் சேர்க்கவும்:
.அலைன்-இருந்து-வலது {காட்சி: நெகிழ்வு;
நியாயப்படுத்த - உள்ளடக்கம் : இடைவெளி-இடையில்;
}
.வலது சீரமைக்கப்பட்டது {
align-self: flex-end;
திணிப்பு: 10px;
பின்னணி - நிறம் : நடுத்தர ஊதா;
}
மேலே உள்ள குறியீட்டில்,
- ஒதுக்க ' நெகிழ்வு 'மற்றும் 'இடை-இடை' மதிப்புகள் ' காட்சி 'மற்றும்' நியாயப்படுத்த-உள்ளடக்கம் ” பண்புகள், முறையே. இந்த பண்புகள் div ஒரு நெகிழ்வு மற்றும் குழந்தை divs இடையே சம இடைவெளி வைக்க.
- ' align-self 'சொத்து அமைக்கப்பட்டுள்ளது' நெகிழ்வு-முடிவு ”, இது கொள்கலனின் வலது பக்கம் சீரமைக்க காரணமாகிறது.
மேலே உள்ள குறியீட்டை இயக்கிய பின் இணையப்பக்கம் இப்படி இருக்கும்:
ஃப்ளெக்ஸ் அமைப்பைப் பயன்படுத்தி div சரியாக சீரமைக்கப்பட்டுள்ளதை வெளியீடு காட்டுகிறது.
முறை 4: கிரிட் அமைப்பைப் பயன்படுத்துதல்
டிவை வலது சீரமைக்க கிரிட் அமைப்பையும் பயன்படுத்தலாம். HTML குறியீடு அமைப்பு அப்படியே உள்ளது:
.அலைன்-இருந்து-வலது {காட்சி: கட்டம்;
கட்டம்-வார்ப்புரு-நெடுவரிசைகள்: மீண்டும் ( 2 , 1fr ) ;
}
.வலது சீரமைக்கப்பட்டது {
கட்டம்-நெடுவரிசை- தொடங்கு : 2 ;
திணிப்பு: 10px;
பின்னணி - நிறம் : டீல்;
}
குறியீட்டின் விளக்கம் கீழே கொடுக்கப்பட்டுள்ளது:
- முதலில், பெற்றோர் வகுப்பைத் தேர்ந்தெடுக்கவும் ' .அலைன்-இருந்து-வலது 'மற்றும் அதை அமைக்கவும்' காட்சி 'சொத்து' கட்டம் ”.
- பின்னர், 'ஐப் பயன்படுத்தி சம அளவில் இரண்டு நெடுவரிசைகளை உருவாக்கவும் கட்டம்-வார்ப்புரு-நெடுவரிசைகள் ' தயாராதல் ' மீண்டும் (2, 1fr) ”.
- இறுதியில், குழந்தை பிரிவு வகுப்பைத் தேர்ந்தெடுக்கவும் ' .வலது சீரமைக்கப்பட்டது 'மற்றும்' அமைக்கவும் கட்டம்-நெடுவரிசை-தொடக்கம் ”பண்புக்கு 2. இந்தப் பண்பு இரண்டாவது நெடுவரிசையிலிருந்து அதாவது வலது பக்கத்திலிருந்து உறுப்பைத் தொடங்குகிறது.
மேலே உள்ள குறியீட்டை இயக்கிய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:
'ஐப் பயன்படுத்தி div இப்போது சரியாக சீரமைக்கப்பட்டுள்ளது என்பதை வெளியீடு விளக்குகிறது கட்டம் 'தளவமைப்பு பண்புகள்.
முடிவுரை
div ஐ சரியான திசையில் சீரமைக்க, ' மிதவை ”,” சரி ”,” நெகிழ்வு தளவமைப்பு ', மற்றும் ' கட்ட அமைப்பு 'பண்புகள். ' மிதவை 'சொத்து மதிப்பை வழங்குவதன் மூலம் வலதுபுறம் அமைக்கிறது' 0px ”. அதற்காக ' நெகிழ்வு 'சொத்து, காட்சியை நெகிழ வைத்து பயன்படுத்தவும்' align-self 'சொத்து' நெகிழ்வு-முடிவு ”. கிரிட் சொத்தை பயன்படுத்தி, இரண்டு சம அளவு நெடுவரிசைகளை உருவாக்கி, இரண்டாவது நெடுவரிசையில் இருந்து குழந்தை பிரிவை தொடங்கவும்.