இந்த வலைப்பதிவு டெயில்விண்டில் உள்ள பல கூறுகளுக்கு இடையில் சமமான இடத்தை ஒதுக்கும் யோசனையை வழங்கும்.
டெயில்விண்டில் பல கூறுகளுக்கு இடையில் சமமான இடத்தை எவ்வாறு ஒதுக்குவது?
பயனர்கள் உறுப்புகளுக்கு இடையில் சம இடைவெளிகளை ஒதுக்கலாம் ' இடம்-{x/y}-{size} 'பயன்பாட்டு வகுப்பு. முழு எண் மதிப்பைக் குறிப்பிடுவதன் மூலம் பயனர்கள் x அல்லது y- அச்சில் இடத்தைச் சேர்க்கலாம். இணையப் பக்கத்தை கவர்ச்சிகரமானதாக்குவதால் இடைவெளி பயன்பாடு அவசியம். ஒரு வலைப்பக்கத்தில் உறுப்புகளுக்கு இடையே சரியான இடைவெளி இல்லை என்றால், அது பயனர்களை ஈர்க்காது.
கட்ட உறுப்புகளுக்கு இடையில் சமமான இடத்தை ஒதுக்க ஒரு குறியீட்டு உதாரணத்தை எடுத்துக் கொள்வோம்.
முறை 1: X- அச்சில் இடத்தை ஒதுக்குதல்.
x அச்சில் ஒதுக்கப்பட்ட சம இடைவெளி உறுப்புக்கு வலது மற்றும் இடது பக்கம் சமமான இடைவெளியை உருவாக்குகிறது. x அச்சில் இடத்தை ஒதுக்க, பின்வரும் தொடரியல் பயன்படுத்தவும்:
விண்வெளி - எக்ஸ் - { அளவு }
அளவு எந்த முழு எண்ணாகவும் இருக்கலாம்.
x அச்சில் சம இடத்தை ஒதுக்க கீழே உள்ள குறியீட்டைக் கவனியுங்கள்:
< உடல் >< div வர்க்கம் = 'mx-4 கிரிட் கிரிட்-கோல்ஸ்-4 ஸ்பேஸ்-x-4' >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
உடல் >
இந்த குறியீட்டில்:
- ' mx-4 ” x அச்சில் (வலது மற்றும் இடது) 4 px விளிம்பைச் சேர்க்கிறது.
- ' கட்டம் ” வகுப்பு ஒரு கட்டத்தை உருவாக்குகிறது.
- ' கட்டம்-கோல்கள்-4 'கட்டத்தில் 4 நெடுவரிசைகளை உருவாக்கவும்.
- ' விண்வெளி-x-4 ” கட்டத்தின் உறுப்புகளுக்கு இடையில் 4px இடைவெளியைச் சேர்க்கிறது.
- ' bg-green-400 ” பின்னணி நிறத்தை பச்சை நிறமாக அமைக்கிறது.
- ' h-16 ” உயரத்தை 16px ஆக அமைக்கிறது.
- ' வட்டமான-எல்ஜி ” மூலையை வட்டமாக்குகிறது மற்றும் எல்லை ஆரம் பெரியது.
- ' எல்லை-2 ” உறுப்பைச் சுற்றி 2px பார்டரை உருவாக்குகிறது.
- ' எல்லை-பச்சை-800 ” எல்லையை அடர் பச்சையாக்குகிறது.
வெளியீடு
மேலே உள்ள குறியீட்டின் மூலம் உருவாக்கப்பட்ட வெளியீட்டை முன்னோட்டமிடவும்:
உறுப்புகளுக்கு இடையில் 4px இடைவெளி ஒதுக்கப்பட்டிருப்பதைக் காணலாம்.
முறை 2: y அச்சில் இடத்தை ஒதுக்குதல்.
மேலே உள்ள குறியீட்டில் சிறிய மாற்றங்களின் மூலம், மேலே உள்ள முறையைப் போலவே y- அச்சில் இடைவெளியை ஒதுக்கலாம். இது y- அச்சில் (மேல் மற்றும் கீழ்) இடைவெளிகளை ஒதுக்குகிறது. அதற்கான தொடரியல்:
y அச்சில் இடைவெளிகளைச் சேர்க்க, கீழே உள்ள குறியீட்டைச் செயல்படுத்தலாம்:
< உடல் >< div வர்க்கம் = 'mx-4 my-4 space-y-4' >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div வர்க்கம் = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
உடல் >
இந்த குறியீட்டில்:
- ' mx-4 ” வெளியீட்டை மேலும் உகந்ததாக்க உறுப்புகளின் இடது மற்றும் வலதுபுறத்தில் 4px விளிம்பைச் சேர்க்கிறது.
- ' என்-4 ” y-அச்சில் (மேல் மற்றும் கீழ்) 4px விளிம்பைச் சேர்க்கிறது.
- ' விண்வெளி-y-4 ” என்பது y அச்சில் (மேல் மற்றும் கீழ்) 4px இடத்தை சேர்க்கிறது.
வெளியீடு
மேலே உள்ள குறியீட்டைச் சேமித்து, அதன் மூலம் உருவாக்கப்பட்ட வலைப்பக்கத்தை முன்னோட்டம் பார்க்கவும்:
உறுப்புகளுக்கு இடையில் சமமான இடத்தை ஒதுக்குவது தான்.
முடிவுரை
டெயில்விண்டில் உள்ள பல உறுப்புகளுக்கு இடையே சமமான இடத்தை ஒதுக்க, பயனர்கள் ' இடம்-{x/y}-{size} ” பயன்பாட்டு வகுப்பு மற்றும் தேவைக்கு ஏற்ப ஒரு முழு எண் மதிப்பை அளவு குறிப்பிடவும். உறுப்புகளுக்கு இடையே சமமான இடைவெளி இருப்பதால், வெளியீட்டை மேலும் அளவிடக்கூடியதாக ஆக்குகிறது மற்றும் பார்வையாளர்கள் வலைப்பக்கத்தில் ஈடுபடுவார்கள். இந்த இடுகை டெயில்விண்டில் பல உறுப்புகளுக்கு இடையில் சமமான இடத்தை ஒதுக்கும் முறையை வழங்கியுள்ளது.