பல ஆண்டுகளாக, CSS மிதவைகள் இணையதளத்தில் அமைப்பு உருவாக்க ஒரு finicky, இன்னும் தேவையான, கூறு இருந்தது. உங்கள் வடிவமைப்பு பல நெடுவரிசைகளுக்கு அழைக்கப்பட்டிருந்தால், நீங்கள் மிதவைக்குத் திரும்பினீர்கள் . சிக்கலான தளம் தளவமைப்புகளை உருவாக்குவதில் வலை வடிவமைப்பாளர்கள் / டெவலப்பர்கள் காட்டிய நம்பமுடியாத புத்திசாலித்தனம் இருந்தபோதிலும், CSS மிதவைகள் உண்மையில் இந்த வழியில் பயன்படுத்தப்பட வேண்டியதில்லை என்று இந்த முறையிலான சிக்கல் உள்ளது.
மிதவைகள் மற்றும் CSS பொருத்துதல் பல ஆண்டுகளாக வலை வடிவமைப்பு ஒரு இடத்தில் நிச்சயமாக இருக்க வேண்டும் போது, CSS கட்டம் மற்றும் Flexbox உட்பட புதிய அமைப்பை நுட்பங்களை இப்போது வலை வடிவமைப்பாளர்கள் தங்கள் தளத்தில் அமைப்பு உருவாக்க புதிய வழிகளில் கொடுத்து. சாத்தியமான நிறைய காட்டுகிறது என்று மற்றொரு புதிய அமைப்பை நுட்பம் CSS பல பத்திகள் உள்ளது.
CSS பத்திகள் இப்போது ஒரு சில வருடங்கள் சுற்றி இருந்தன, ஆனால் பழைய உலாவிகளில் (முக்கியமாக இன்டர்நெட் எக்ஸ்ப்ளோரர் பழைய பதிப்புகளில்) ஆதரவு இல்லாததால் பல வலைத் தொழில் வல்லுநர்கள் இந்த பாணியை தங்கள் உற்பத்திப் பணியில் பயன்படுத்தினர்.
IE இன் பழைய பதிப்புகள் ஆதரவு இறுதியில், சில வலை வடிவமைப்பாளர்கள் இப்போது புதிய CSS அமைப்பை விருப்பங்கள், CSS பத்திகள் சேர்க்கப்பட்டுள்ளது, மற்றும் அவர்கள் மிதவைகள் செய்ததை விட இந்த புதிய அணுகுமுறைகள் மிகவும் அதிக கட்டுப்பாடு என்று கண்டறியும்.
CSS நெடுவரிசைகளின் அடிப்படைகள்
அதன் பெயர் குறிப்பிட்டுள்ளபடி, CSS பல பத்திகள் (மேலும் CSS3 பல-நெடுவரிசை அமைப்பு என அழைக்கப்படுகிறது) உள்ளடக்கத்தை பிளவுகளின் தொகுப்பு எண்ணில் பிரிக்க அனுமதிக்கிறது. நீங்கள் பயன்படுத்தும் மிக அடிப்படை CSS பண்புகள்:
- நிரலை-எண்ணிக்கை
- கம்ப-இடைவெளி
நெடுவரிசை-எண்ணில், நீங்கள் விரும்பும் நெடுவரிசைகளின் எண்ணிக்கையை குறிப்பிடுக. நெடுவரிசை இடைவெளி அந்த நெடுவரிசைகளுக்கு இடையில் உள்ள இடைவெளிகள் அல்லது இடைவெளி. உலாவி இந்த மதிப்புகள் எடுக்கும் மற்றும் நீங்கள் குறிப்பிடும் நெடுவரிசைகளின் எண்ணிக்கைக்கு சமமாக உள்ளடக்கத்தை பிரிக்கும்.
நடைமுறையில் CSS பல பத்திகள் ஒரு பொதுவான உதாரணம் நீங்கள் ஒரு செய்தித்தாள் கட்டுரையில் பார்க்க என்ன ஒத்த, பல பத்திகள் ஒரு உரை உள்ளடக்கத்தை பிளாக் பிரித்து. நீங்கள் பின்வரும் HTML குறியீட்டைக் கொண்டிருக்க வேண்டும் என்று கூறுங்கள் (உதாரணமாக, நான் ஒரு பத்தியின் தொடக்கத்தை மட்டும் வைத்துக்கொள்கிறேன், நடைமுறையில் இந்த மார்க்கெட்டில் பல பத்திகள் இருக்கக்கூடும்):
உங்கள் கட்டுரையின் தலைப்பு
இங்கே உரை நிறைய பத்திகளை கற்பனை செய்து பாருங்கள் ...
நீங்கள் இந்த CSS பாணியை எழுதியிருந்தால்
.content {-moz-column-count: 3; -webkit-column-count: 3; நிரல் எண்: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; பத்தியில் இடைவெளி: 30px; }இந்த CSS விதி "உள்ளடக்க" பிரிவை 3 சமமான பத்திகளாக பிரித்து 30 பிக்சல்களின் இடைவெளியைக் கொண்டிருக்கும். 3 க்கு பதிலாக இரண்டு நெடுவரிசைகளை நீங்கள் விரும்பினால், நீங்கள் அந்த மதிப்பை மாற்றிக் கொள்ளலாம் மற்றும் உலாவி அந்த நெடுவரிசையின் புதிய அகலங்களைக் கணக்கிட வேண்டும். முன்னரே விற்பனையாளர்-முன்னுரிமை பண்புகளை நாங்கள் பயன்படுத்துவதை கவனிக்கவும்.
இது போன்ற எளிமையான, இந்த வழியில் அதன் பயன்பாடு வலைத்தள பயன்பாட்டிற்கு கேள்விக்குரியது. ஆமாம், நீங்கள் பல பத்திகளில் உள்ளடக்கத்தை ஒரு கொத்து பிரிக்கலாம், ஆனால் இந்த நெடுவரிசையின் உயரம் திரையின் "மடங்காக" கீழே விழுந்தால், இது வலைக்கு சிறந்த வாசிப்பு அனுபவமாக இருக்கலாம்.
வாசகர்கள் முழு உள்ளடக்கத்தையும் படிப்பதற்காக கீழே உருட்டும் வேண்டும். இருப்பினும், CSS நெடுவரிசைகளின் முக்கியமானது இங்கே காணும் போது எளிதானது, மேலும் சில பத்திகளின் உள்ளடக்கத்தை பிரித்தெடுப்பதைக் காட்டிலும் அதிகமாக இதைப் பயன்படுத்தலாம் - இது அமைப்பைப் பயன்படுத்தலாம்.
CSS பத்திகள் கொண்ட லேஅவுட்
உள்ளடக்கத்தை 3 பத்திகள் கொண்ட உள்ளடக்க பகுதியுடன் உங்களுக்கு வலைப்பக்கம் உள்ளது என்று கூறுங்கள். இது ஒரு மிகவும் பொதுவான வலைத்தள அமைப்பாகும், மற்றும் அந்த 3 பத்திகளை அடைய, நீங்கள் சாதாரணமாக உள்ள பிளவுகளை CSS பல பத்திகள் கொண்டு, அது மிகவும் எளிதாக உள்ளது.
இங்கே சில மாதிரி HTML:
சமீபத்திய செய்திகள்
உள்ளடக்கம் இங்கே போகும் ...
p>
இந்த பல நெடுவரிசைகளை உருவாக்கும் CSS நீங்கள் முன்னர் பார்த்தவற்றைத் தொடங்குகிறது:
.content {-moz-column-count: 3; -webkit-column-count: 3; நிரல் எண்: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; பத்தியில் இடைவெளி: 30px; } இப்போது, சவால் இங்கே, உலாவி இந்த உள்ளடக்கத்தை சமமாக பிரிக்க விரும்புகிறது என்பதால், இந்த பிரிவுகளின் உள்ளடக்க நீளம் வேறுபட்டால், அந்த உலாவி உண்மையில் ஒரு பிரிவின் உள்ளடக்கத்தை பிரித்து, அதன் தொடக்கத்தை ஒரு நெடுவரிசையில் சேர்க்கும் பிறகு இன்னொரு பக்கம் தொடர்கிறது (ஒரு சோதனை நடத்த இந்த குறியீட்டைப் பயன்படுத்துவதன் மூலம் இதைப் பார்க்க முடியும், ஒவ்வொரு பிரிவிலும் உள்ளடக்கத்தின் பல்வேறு நீளங்களை சேர்க்கலாம்)!
அது உனக்கு என்ன வேண்டும். இந்த பிரிவுகளில் ஒவ்வொன்றும் தனித்துவமான நெடுவரிசைகளை உருவாக்குவதையும், எவ்வளவு பெரிய அல்லது சிறிய ஒரு பிரிவின் உள்ளடக்கம் இருந்தாலும், அதை நீங்கள் பிரிப்பதற்கில்லை. CSS இன் கூடுதல் வரிசையைச் சேர்ப்பதன் மூலம் இதைச் சாதிக்கலாம்:
.content div {display: inline-block; } உலாவி இந்த பல பத்திகளாக பிரிக்கும்போது கூட "உள்ளடக்கம்" உள்ளே இருக்கும் பிளவுகளை இது நிரப்பும். இன்னும் சிறப்பாக, நாம் இங்கே ஒரு நிலையான அகலத்தை கொடுக்கவில்லை என்பதால், உலாவி மறுஅளவாக்குவதால், இந்த நெடுவரிசைகள் தானாக மறுஅளவாக்குகின்றன, இதனால் அவை பதிலளிக்க வலைத்தளங்களுக்கான ஒரு சிறந்த பயன்பாடாகும். அந்த இடத்தில் "இன்லைன்-பிளாக்" பாணியில், உங்களுடைய மூன்று பிரிவுகளும் உள்ளடக்கத்தின் தனித்துவமான நிரலாக இருக்கும்.
நெடுவரிசை அகலம்
நீங்கள் பயன்படுத்தக்கூடிய "நெடுவரிசை-எண்ணிக்கை", மற்றும் உங்கள் தளவமைப்பு தேவைகளைப் பொறுத்து மற்றொரு சொத்து உள்ளது, அது உண்மையில் உங்கள் தளத்தில் சிறந்த தேர்வாக இருக்கும். இது "நெடுவரிசை அகலம்". முன்னர் காட்டப்பட்ட அதே HTML மார்க்கப் பயன்படுத்தி, அதற்கு பதிலாக எங்கள் CSS உடன் இதை செய்யலாம்:
.content {-moz-column-width: 500px; -webkit- நெடுவரிசை அகலம்: 500px; நெடுவரிசை அகலம்: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; பத்தியில் இடைவெளி: 30px; } .content div {display: inline-block; } இந்த வேலை, உலாவி இந்த நெடுவரிசையின் அதிகபட்ச மதிப்பாக இந்த "நெடுவரிசை அகலத்தை" பயன்படுத்துகிறது. உலாவி சாளரத்தை 500 பிக்சல்கள் அகலத்தில் குறைவாக இருந்தால், இந்த மூன்று பிரிவுகளும் ஒரே ஒரு நெடுவரிசையில் தோன்றும், மற்றொரு டாப்ஸ் ஒன்றில் தோன்றும். இது மொபைல் / சிறிய திரை அமைப்புகளுக்கு பயன்படுத்தப்படும் ஒரு பொதுவான அமைப்பாகும்.
உலாவி அகலம் குறிப்பிட்ட நெடுவரிசை இடைவெளிகளுடன் 2 நெடுவரிசைகளுக்கு பொருந்துவதற்கு போதுமான அளவு அதிகரிக்கும்போது, உலாவி தானாகவே ஒரு நெடுவரிசை அமைப்பிலிருந்து இரண்டு நெடுவரிசைகளுக்கு செல்லும். திரையின் அகலத்தை அதிகரித்து, கடைசியில், 3 பத்தியில் வடிவமைப்பு ஒன்றைப் பெறுவீர்கள், அவற்றில் ஒவ்வொன்றும் ஒவ்வொன்றும் தங்கள் சொந்த நெடுவரிசையில் காண்பிக்கப்படும். மீண்டும், இந்த சில பதிலளிக்க, பல சாதனம் நட்பு அமைப்பு பெற ஒரு சிறந்த வழி, மற்றும் நீங்கள் கூட அமைப்பை பாணியை மாற்ற ஊடக கேள்விகளுக்கு பயன்படுத்த தேவையில்லை!
பிற நெடுவரிசை பண்புகள்
இங்கே மூடப்பட்டிருக்கும் பண்புகளுடன் கூடுதலாக, "நெடுவரிசை-விதி" க்கான பண்புகள் உள்ளன, வண்ணம், பாணி மற்றும் அகல மதிப்புகளை உள்ளடக்கியது, இது உங்கள் நெடுவரிசைகளுக்கு இடையில் விதிகளை உருவாக்க அனுமதிக்கிறது. உங்கள் நெடுவரிசைகளை பிரிக்கும் சில வரிகளை நீங்கள் விரும்பினால் எல்லைகளுக்கு பதிலாக இவை பயன்படுத்தப்படும்.
பரிசோதனை நேரம்
தற்போது, CSS பல வரிசை அமைப்பை நன்றாக துணைபுரிகிறது. முன்னுரிமைகள் மூலம், 94% க்கும் மேற்பட்ட வலை பயனர்கள் இந்த பாணியைக் காண முடியும், மேலும் ஆதரிக்கப்படாத குழுவானது, இன்டர்நெட் எக்ஸ்ப்ளோரரின் மிக பழைய பதிப்புகளாக இருக்கும், அது எப்போதுமே நீங்கள் ஆதரிக்காமல் இருக்கலாம்.
இப்போது இந்த நிலை ஆதரவுடன், CSS பத்திகளை பரிசோதித்து தொடங்குவதற்கு எந்தவிதமான காரணமும் இல்லை, தயாரிப்பின் தயாராக வலைத்தளங்களில் இந்த பாணியை பயன்படுத்துகிறது. இந்த கட்டுரையில் வழங்கப்பட்ட HTML மற்றும் CSS ஐப் பயன்படுத்தி உங்கள் சோதனைகள் தொடங்கலாம் மற்றும் உங்கள் தளத்தின் தளவமைப்பு தேவைகளுக்கு சிறந்தது என்ன என்பதைப் பார்க்க பல்வேறு மதிப்புகளுடன் சுற்றி விளையாடலாம்.
p>
இந்த பல நெடுவரிசைகளை உருவாக்கும் CSS நீங்கள் முன்னர் பார்த்தவற்றைத் தொடங்குகிறது:
.content {-moz-column-count: 3; -webkit-column-count: 3; நிரல் எண்: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; பத்தியில் இடைவெளி: 30px; }இப்போது, சவால் இங்கே, உலாவி இந்த உள்ளடக்கத்தை சமமாக பிரிக்க விரும்புகிறது என்பதால், இந்த பிரிவுகளின் உள்ளடக்க நீளம் வேறுபட்டால், அந்த உலாவி உண்மையில் ஒரு பிரிவின் உள்ளடக்கத்தை பிரித்து, அதன் தொடக்கத்தை ஒரு நெடுவரிசையில் சேர்க்கும் பிறகு இன்னொரு பக்கம் தொடர்கிறது (ஒரு சோதனை நடத்த இந்த குறியீட்டைப் பயன்படுத்துவதன் மூலம் இதைப் பார்க்க முடியும், ஒவ்வொரு பிரிவிலும் உள்ளடக்கத்தின் பல்வேறு நீளங்களை சேர்க்கலாம்)!
அது உனக்கு என்ன வேண்டும். இந்த பிரிவுகளில் ஒவ்வொன்றும் தனித்துவமான நெடுவரிசைகளை உருவாக்குவதையும், எவ்வளவு பெரிய அல்லது சிறிய ஒரு பிரிவின் உள்ளடக்கம் இருந்தாலும், அதை நீங்கள் பிரிப்பதற்கில்லை. CSS இன் கூடுதல் வரிசையைச் சேர்ப்பதன் மூலம் இதைச் சாதிக்கலாம்:
.content div {display: inline-block; }உலாவி இந்த பல பத்திகளாக பிரிக்கும்போது கூட "உள்ளடக்கம்" உள்ளே இருக்கும் பிளவுகளை இது நிரப்பும். இன்னும் சிறப்பாக, நாம் இங்கே ஒரு நிலையான அகலத்தை கொடுக்கவில்லை என்பதால், உலாவி மறுஅளவாக்குவதால், இந்த நெடுவரிசைகள் தானாக மறுஅளவாக்குகின்றன, இதனால் அவை பதிலளிக்க வலைத்தளங்களுக்கான ஒரு சிறந்த பயன்பாடாகும். அந்த இடத்தில் "இன்லைன்-பிளாக்" பாணியில், உங்களுடைய மூன்று பிரிவுகளும் உள்ளடக்கத்தின் தனித்துவமான நிரலாக இருக்கும்.
நெடுவரிசை அகலம்
நீங்கள் பயன்படுத்தக்கூடிய "நெடுவரிசை-எண்ணிக்கை", மற்றும் உங்கள் தளவமைப்பு தேவைகளைப் பொறுத்து மற்றொரு சொத்து உள்ளது, அது உண்மையில் உங்கள் தளத்தில் சிறந்த தேர்வாக இருக்கும். இது "நெடுவரிசை அகலம்". முன்னர் காட்டப்பட்ட அதே HTML மார்க்கப் பயன்படுத்தி, அதற்கு பதிலாக எங்கள் CSS உடன் இதை செய்யலாம்:
.content {-moz-column-width: 500px; -webkit- நெடுவரிசை அகலம்: 500px; நெடுவரிசை அகலம்: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; பத்தியில் இடைவெளி: 30px; } .content div {display: inline-block; }இந்த வேலை, உலாவி இந்த நெடுவரிசையின் அதிகபட்ச மதிப்பாக இந்த "நெடுவரிசை அகலத்தை" பயன்படுத்துகிறது. உலாவி சாளரத்தை 500 பிக்சல்கள் அகலத்தில் குறைவாக இருந்தால், இந்த மூன்று பிரிவுகளும் ஒரே ஒரு நெடுவரிசையில் தோன்றும், மற்றொரு டாப்ஸ் ஒன்றில் தோன்றும். இது மொபைல் / சிறிய திரை அமைப்புகளுக்கு பயன்படுத்தப்படும் ஒரு பொதுவான அமைப்பாகும்.
உலாவி அகலம் குறிப்பிட்ட நெடுவரிசை இடைவெளிகளுடன் 2 நெடுவரிசைகளுக்கு பொருந்துவதற்கு போதுமான அளவு அதிகரிக்கும்போது, உலாவி தானாகவே ஒரு நெடுவரிசை அமைப்பிலிருந்து இரண்டு நெடுவரிசைகளுக்கு செல்லும். திரையின் அகலத்தை அதிகரித்து, கடைசியில், 3 பத்தியில் வடிவமைப்பு ஒன்றைப் பெறுவீர்கள், அவற்றில் ஒவ்வொன்றும் ஒவ்வொன்றும் தங்கள் சொந்த நெடுவரிசையில் காண்பிக்கப்படும். மீண்டும், இந்த சில பதிலளிக்க, பல சாதனம் நட்பு அமைப்பு பெற ஒரு சிறந்த வழி, மற்றும் நீங்கள் கூட அமைப்பை பாணியை மாற்ற ஊடக கேள்விகளுக்கு பயன்படுத்த தேவையில்லை!
பிற நெடுவரிசை பண்புகள்
இங்கே மூடப்பட்டிருக்கும் பண்புகளுடன் கூடுதலாக, "நெடுவரிசை-விதி" க்கான பண்புகள் உள்ளன, வண்ணம், பாணி மற்றும் அகல மதிப்புகளை உள்ளடக்கியது, இது உங்கள் நெடுவரிசைகளுக்கு இடையில் விதிகளை உருவாக்க அனுமதிக்கிறது. உங்கள் நெடுவரிசைகளை பிரிக்கும் சில வரிகளை நீங்கள் விரும்பினால் எல்லைகளுக்கு பதிலாக இவை பயன்படுத்தப்படும்.
பரிசோதனை நேரம்
தற்போது, CSS பல வரிசை அமைப்பை நன்றாக துணைபுரிகிறது. முன்னுரிமைகள் மூலம், 94% க்கும் மேற்பட்ட வலை பயனர்கள் இந்த பாணியைக் காண முடியும், மேலும் ஆதரிக்கப்படாத குழுவானது, இன்டர்நெட் எக்ஸ்ப்ளோரரின் மிக பழைய பதிப்புகளாக இருக்கும், அது எப்போதுமே நீங்கள் ஆதரிக்காமல் இருக்கலாம்.
இப்போது இந்த நிலை ஆதரவுடன், CSS பத்திகளை பரிசோதித்து தொடங்குவதற்கு எந்தவிதமான காரணமும் இல்லை, தயாரிப்பின் தயாராக வலைத்தளங்களில் இந்த பாணியை பயன்படுத்துகிறது. இந்த கட்டுரையில் வழங்கப்பட்ட HTML மற்றும் CSS ஐப் பயன்படுத்தி உங்கள் சோதனைகள் தொடங்கலாம் மற்றும் உங்கள் தளத்தின் தளவமைப்பு தேவைகளுக்கு சிறந்தது என்ன என்பதைப் பார்க்க பல்வேறு மதிப்புகளுடன் சுற்றி விளையாடலாம்.