டெயில்விண்ட் CSS இல், மாற்றப்பட்ட கூறுகள் என்பது படங்கள் மற்றும் வீடியோக்கள் போன்ற வெளிப்புற ஆதாரங்களால் உள்ளடக்கத்தை மாற்றியமைக்கப்படும் கூறுகள் ஆகும். சில நேரங்களில், மாற்றப்பட்ட உறுப்பை கொள்கலனுக்குள் வைப்பதில் பயனர்கள் சவாலை எதிர்கொள்கின்றனர். ஏனென்றால், இந்த கூறுகள் அவற்றின் அளவு இருக்கும் இடத்தை விட பெரியதாக இருந்தால் கொள்கலனில் நிரம்பி வழியும். டெயில்விண்ட் CSS ஆனது, மாற்றப்பட்ட உறுப்பின் உள்ளடக்கம் எவ்வாறு கொள்கலனுக்குள் நிலைநிறுத்தப்பட்டு சீரமைக்கப்படுகிறது என்பதைக் கட்டுப்படுத்த பயன்பாட்டு வகுப்புகளை வழங்குகிறது.
டெயில்விண்ட் CSS இல் உள்ள ஒரு கொள்கலனுக்குள் மாற்றப்பட்ட கூறுகளை நிலைநிறுத்துவதற்கான முறையை இந்தக் கட்டுரை விளக்குகிறது.
டெயில்விண்டில் ஒரு கொள்கலனுக்குள் மாற்றப்பட்ட கூறுகளை எவ்வாறு நிலைநிறுத்துவது?
டெயில்விண்டில் உள்ள ஒரு கொள்கலனுக்குள் மாற்றப்பட்ட கூறுகளை நிலைநிறுத்த, ஒரு HTML நிரலை உருவாக்கி, ' பொருள்-<நிலை/பக்கம்> 'தேவையான கூறுகளுடன் கூடிய பயன்பாடுகள். மாற்றப்பட்ட உறுப்புகளை நிலைநிறுத்த, 'object-
தொடரியல்
< உறுப்பு வர்க்கம் = 'object-
உதாரணமாக
இந்த எடுத்துக்காட்டில், நாங்கள் ஒரு கொள்கலனை உருவாக்கி அனைத்தையும் பயன்படுத்துவோம் ' பொருள்-<நிலை/பக்கம்> 'பயன்பாடுகள்' ” (படம்) கூறுகள் கொள்கலனுக்குள் அவற்றின் மாற்றியமைக்கப்பட்ட நிலையைக் குறிப்பிட:
< உடல் >
< div வர்க்கம் = 'bg-sky-300 கிரிட் கட்டம்-வரிசைகள்-3 கட்டம்-ஓட்டம்-col m-5 space-y-4 p-4 justify-between' >
< img வர்க்கம் = 'object-none object-left-top w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'பொருள்-இல்லை பொருள்-இடது w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'பொருள்-இல்லை பொருள்-இடது-கீழ் w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'object-none object-center w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'பொருள்-இல்லை பொருள்-வலது-மேல் w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'பொருள்-இல்லை பொருள்-வலது w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img வர்க்கம் = 'பொருள்-இல்லை பொருள்-வலது-கீழ் w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
உடல் >
இங்கே, பெற்றோர்
- ' bg-sky-300 ” வகுப்பு கொள்கலனின் பின்னணி நிறத்தை வானத்திற்கு அமைக்கிறது.
- ' கட்டம் 'வகுப்பு ஒரு கட்ட அமைப்பை செயல்படுத்துகிறது.
- ' கட்டம்-வரிசைகள்-3 ”வகுப்பு கட்டத்திலுள்ள வரிசைகளின் எண்ணிக்கையை 3 ஆக அமைக்கிறது.
- ' கட்டம்-ஓட்டம்-கோல் 'வகுப்பு நெடுவரிசைகளில் கட்டம் உருப்படிகளின் ஓட்டத்தை வரையறுக்கிறது.
- ' மீ-5 ” வகுப்பு, கொள்கலனைச் சுற்றி 5 யூனிட் விளிம்புகளைச் சேர்க்கிறது.
- ' விண்வெளி-y-4 ” வகுப்பு என்பது கொள்கலனில் உள்ள குழந்தை
உறுப்புகளுக்கு இடையே 4 அலகுகளின் செங்குத்து இடைவெளியைச் சேர்க்கிறது.
- ' ப-4 ” வகுப்பு, கொள்கலனுக்குள் இருக்கும் உள்ளடக்கத்தில் 4 யூனிட் பேடிங்கைச் சேர்க்கிறது.
- ' நியாயப்படுத்த-இடையில் 'வகுப்பு கொள்கலனில் உள்ள குழந்தை கூறுகளை சீரமைத்து அவற்றை சமமாக விநியோகிக்கிறது.
உறுப்புகளில்:
- ' பொருள்-இல்லை 'வகுப்பு உறுப்புக்கு எந்த நிலையையும் பயன்படுத்தாது மற்றும் கொள்கலனில் அதன் இயல்புநிலை நிலையில் உறுப்பைக் காண்பிக்கும்.
- ' பொருள்-இடது-மேல் ” வகுப்பு
உறுப்பை அதன் கொள்கலனின் மேல்-இடது மூலையில் நிலைநிறுத்துகிறது.
- ' பொருள்-இடது 'வகுப்பு கொள்கலனின் இடது விளிம்பில் உறுப்பை சீரமைத்து செங்குத்தாக மையமாக வைத்திருக்கிறது.
- ' பொருள்-இடது-கீழ் ” வகுப்பு
உறுப்பை அதன் கொள்கலனின் கீழ்-இடது மூலையில் நிலைநிறுத்துகிறது.
- ' பொருள்-மேல் ” வகுப்பு அதன் கொள்கலனின் மேல் விளிம்பில் தனிமத்தை நிலைநிறுத்தி கிடைமட்டமாக மையமாக அமைக்கிறது.
- ' பொருள்-மையம் ” வர்க்கம் கொள்கலனின் மையத்தில் உறுப்பை நிலைநிறுத்தி கிடைமட்டமாகவும் செங்குத்தாகவும் மையமாக வைத்திருக்கிறது.
- ' பொருள்-கீழே ” வகுப்பு அதன் கொள்கலனின் கீழ் விளிம்பில் தனிமத்தை நிலைநிறுத்தி கிடைமட்டமாக மையமாக வைத்திருக்கிறது.
- ' பொருள்-வலது-மேல் ” class ஆனது
உறுப்பை கொள்கலனின் மேல் வலது மூலையில் வைக்கிறது.
- ' பொருள்-வலது ” வர்க்கமானது உறுப்பை அதன் கொள்கலனின் வலது விளிம்பில் நிலைநிறுத்தி செங்குத்தாக மையமாக வைத்திருக்கிறது.
- ' பொருள்-வலது-கீழ் ” வகுப்பு அதன் கொள்கலனின் கீழ் வலது மூலையில் உறுப்பை நிலைநிறுத்துகிறது.
வெளியீடு
மேலே உள்ள வலைப்பக்கத்தில், மாற்றப்பட்ட உறுப்புகளின் உள்ளடக்கம் அனைத்தும் வெற்றிகரமாக நிலைநிறுத்தப்பட்டிருப்பதைக் காணலாம்.
முடிவுரை
டெயில்விண்டில் உள்ள ஒரு கொள்கலனுக்குள் மாற்றப்பட்ட கூறுகளை நிலைநிறுத்த, ' பொருள்-<நிலை/பக்கம்> ” பயன்பாடுகள் படங்கள் போன்ற தேவையான கூறுகளுடன் பயன்படுத்தப்படுகின்றன. மாற்றப்பட்ட உறுப்புகளை நிலைநிறுத்த, 'object-
' பயன்பாட்டில் குறிப்பிட்ட நிலை அல்லது பக்கத்தை அதாவது இடது, வலது அல்லது மையத்தை பயனர்கள் வரையறுக்க வேண்டும். டெயில்விண்ட் CSS இல் உள்ள ஒரு கொள்கலனுக்குள் மாற்றப்பட்ட கூறுகளை நிலைநிறுத்துவதற்கான முறையை இந்தக் கட்டுரை விளக்கியுள்ளது.