சொத்து உள்ளே உடைக்கதற்போதைய உறுப்புக்குள் பக்கம் மற்றும் நெடுவரிசை இடைவெளிகள் எவ்வாறு வைக்கப்பட வேண்டும் என்பதை வரையறுக்கிறது. இயல்பாக, பக்கம் அல்லது நெடுவரிசை இடைவெளிகள் தானாக அமைக்கப்படும் மற்றும் அவை மூல உறுப்புகளிலிருந்து பெறப்படாது. தவிர்த்தல்-பக்க மதிப்பு, அச்சிடுதல் போன்ற பக்கவாட்டு ஆவணங்களை வடிவமைக்கும் போது மட்டுமே பயன்படுத்தப்படும், மேலும் உலாவியில் காட்டப்படும் போது, பிரிக்கப்படாத பார்வைகளுக்கு புறக்கணிக்கப்படும். தவிர்க்க-நெடுவரிசை மதிப்பு பல நெடுவரிசை உரைக்கு பயன்படுத்தப்படுகிறது.
செல்லுபடியாகும் மதிப்புகள்
- CSS2 CSS3 ஆட்டோ- தற்போதைய உறுப்புக்கு முன் தானியங்கி பக்கம் அல்லது நெடுவரிசை முறிவு (இயல்புநிலை)
- CSS2 CSS3 தவிர்க்க
- CSS3 பக்கத்தைத் தவிர்க்கவும்- தற்போதைய உறுப்புக்குள் பக்க முறிவை ரத்துசெய்
- CSS3 தவிர்க்க-நெடுவரிசை- தற்போதைய உறுப்புக்குள் நெடுவரிசை முறிவை ரத்துசெய்
பயன்படுத்துவதற்கான எடுத்துக்காட்டுகள்
உள்ளே உடைக்க: ஆட்டோ; - சீரான விநியோகம்
நெடுவரிசைகளுக்கு இடையில் உள்ளடக்கத்தின் சீரான விநியோகம், இதில் ஏதேனும் உறுப்புகளுக்குள் அல்லது இடையில் மிகவும் பொருத்தமான இடங்களில் உடைப்புகள் தானாகவே வைக்கப்படும். சீரான விநியோகத்துடன், நெடுவரிசைகளின் உயரம் அதிகமாகவோ அல்லது குறைவாகவோ ஒரே மாதிரியான உரை அடர்த்தியுடன் தோராயமாக ஒரே மாதிரியாக இருக்கும்.
நடை (நெடுவரிசை-எண்ணிக்கை: 3; நெடுவரிசை-இடைவெளி: 2எம்; நெடுவரிசை-விதி: 1px திட #666; )
உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை
உடை-உள்ளே: தவிர்க்க-நெடுவரிசை; - நெடுவரிசை இடைவெளியை ரத்துசெய்
உடை (நெடுவரிசை-எண்ணிக்கை: 3; நெடுவரிசை-இடைவெளி: 2எம்; நெடுவரிசை-விதி: 1px திட #666; ) .ஸ்டைல் div (உள்ளே உடைத்தல்: தவிர்க்க-நெடுவரிசை; )
1வது தொகுதிஉரை உரை உரை உரை உரை உரை உரை உரை உரை
2வது தொகுதிஉரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை
3வது தொகுதிஉரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை உரை.
பிரேக்-இன்சைட் சொத்து என்பது CSS 3 மல்டி-கோலம் லேஅவுட் மாட்யூல் விவரக்குறிப்பில் வரையறுக்கப்பட்டுள்ளது, தொகுதி கூறுகளுக்குப் பொருந்தும், மேலும் அனைத்து பக்க ஊடகங்களிலும் செல்லுபடியாகும், அதன் மதிப்பு ஆவணப் படிநிலையில் உள்ள பெற்றோர் உறுப்பிலிருந்து பெறப்படாது, மேலும் தானாக இயல்புநிலையாக இருக்கும். சொத்து தற்போது அனைத்து முக்கிய உலாவிகளிலும் ஆதரிக்கப்படுகிறது.
மேலும் பார்க்க:
- break-after - ஒரு உறுப்புக்குப் பிறகு ஒரு நெடுவரிசை அல்லது பக்க இடைவெளியை அமைப்பதற்கான விதிகள்
- break-before - ஒரு உறுப்புக்கு முன் ஒரு நெடுவரிசை அல்லது பக்க இடைவெளியை அமைப்பதற்கான விதிகள்
- -webkit-column-break-after - ஒரு உறுப்புக்குப் பிறகு நெடுவரிசை இடைவெளியை அமைப்பதற்கான விதிகள்
- -webkit-column-break-before - ஒரு உறுப்புக்கு முன் ஒரு நெடுவரிசை இடைவெளியை அமைப்பதற்கான விதிகள்
- -webkit-column-break-inside - ஒரு உறுப்புக்குள் நெடுவரிசை இடைவெளியை அமைப்பதற்கான விதிகள்
தொகுதி CSS3 நெடுவரிசைகள்செய்தித்தாள் அல்லது பத்திரிக்கையைப் போன்ற பல செங்குத்து கொள்கலன்களில் பரவும் வகையில் உள்ளடக்கத்தை ஒழுங்கமைக்க அனுமதிக்கும் பல நெடுவரிசை அமைப்பை விவரிக்கிறது. நெடுவரிசைகளில் தலைப்புகள், உரை, அட்டவணைகள், படங்கள் மற்றும் பிற இன்லைன் கூறுகள் இருக்கலாம்.
பல நெடுவரிசை மாதிரி
உலாவி ஆதரவு
IE: 10
விளிம்பு: 12
பயர்பாக்ஸ்: 52, 2-மாஸ்
குரோம்: 50, 4 -வெப்கிட்-
சஃபாரி: 9, 3.1 -வெப்கிட்-
ஓபரா: 37, 11.5 -வெப்கிட்-
iOS சஃபாரி: 9, 3.2 -வெப்கிட்-
Androidக்கான UC உலாவி: 11.8
Androidக்கான Chrome: 73
சாம்சங் இணையம்: 5, 4 -வெப்கிட்-
பழைய இடுகை
நவம்பர் 24, 2012
இங்கிலாந்தின் 15 மிக அழகான சிறிய நகரங்கள்
1. பெர்விக்-ஆன்-ட்வீட்
10 ஆம் நூற்றாண்டில் இங்கிலாந்தால் இணைக்கப்பட்ட நார்தம்ப்ரியா இராச்சியத்தின் காலத்தில் பெர்விக் ஆங்கிலோ-சாக்சன் குடியேற்றமாக நிறுவப்பட்டது. இப்பகுதி 400 ஆண்டுகளுக்கும் மேலாக இங்கிலாந்து மற்றும் ஸ்காட்லாந்து இராச்சியங்களுக்கு இடையிலான வரலாற்று எல்லைப் போர்களுக்கு மையமாக இருந்தது, மேலும் பல முறை பெர்விக் உடைமை இரண்டு ராஜ்யங்களுக்கு இடையில் கை மாறியது. 1482 இல் க்ளோசெஸ்டரைச் சேர்ந்த ரிச்சர்ட் அதை இங்கிலாந்துக்காக மீட்டெடுத்தபோது கடைசியாக அது கை மாறியது. இன்றுவரை பல பெர்விகர்கள் ஸ்காட்லாந்துடன் நெருங்கிய உறவை உணர்கிறார்கள்.
இப்போதெல்லாம், பெர்விக்-அபான்-ட்வீட் அதன் மிகவும் புலப்படும் வரலாற்றிற்காக அதிகம் பார்வையிடப்படுகிறது: இடைக்கால நகரச் சுவர்கள், எலிசபெதன் அரண்கள், 13 ஆம் நூற்றாண்டின் கோட்டை இடிபாடுகள், அதன் 17 ஆம் நூற்றாண்டின் 'பழைய பாலம்', டவுன் ஹால், பிரிட்டனின் ஆரம்பகால இராணுவ முகாம்கள், இங்கிலாந்தின் வடக்குப் பகுதியில் உள்ள ஹோட்டல் போன்றவை.
2.கம்பு
பழங்கால கம்பு என்பது கற்களால் ஆன தெருக்கள் மற்றும் கடலோரத்தில் உள்ள வீடுகளின் வரிசைகள். முதலில் Cinque Ports Confederation இன் ஒரு பகுதியாக இருந்தது, இடைக்காலத்தில் வர்த்தகம் மற்றும் இராணுவ நோக்கங்களுக்காக முக்கியமான ஐந்து மூலோபாய நகரங்கள், இன்று ரை நடைமுறையில் வாழும் அருங்காட்சியகமாக உள்ளது. பிரபலமாக Ypres டவர் என்று அழைக்கப்படும் Rye Castle, 1249 இல் ஹென்றி III ஆல் கட்டப்பட்டது, இது பிரெஞ்சுக்காரர்களால் அடிக்கடி நடத்தப்படும் தாக்குதல்களிலிருந்து பாதுகாக்கப்பட்டது; இன்னும் பழையது, நார்மன் கால செயின்ட். மேரி தேவாலயம் நகரத்தைப் பார்க்கிறது. இங்கிலாந்தின் மிகவும் பிரபலமான கடற்கரைகளில் ஒன்றான கேம்பர் சாண்ட்ஸிலிருந்து சில நிமிடங்களில் ரை உள்ளது, இது கைட்சர்ஃபர்கள் மற்றும் கடற்கரைப் பிரியர்களுக்கான இரண்டு மைல் நீளமுள்ள விளையாட்டு மைதானமாகும்.
படம் 1. பல நெடுவரிசை தளவமைப்புக்கான எடுத்துக்காட்டு
1. நெடுவரிசைகளின் எண்ணிக்கை மற்றும் அகலம்
பல நெடுவரிசை அமைப்பை உருவாக்கும்போது நெடுவரிசைகளின் எண்ணிக்கை மற்றும் அகலத்தை தீர்மானிப்பது அடிப்படை. நெடுவரிசைகளின் எண்ணிக்கை மற்றும் அகலத்தை அமைக்க நெடுவரிசை எண்ணிக்கை மற்றும் நெடுவரிசை அகல பண்புகள் பயன்படுத்தப்படுகின்றன.
மூன்றாவது பண்பு, நெடுவரிசைகள், ஒரே நேரத்தில் நெடுவரிசைகளின் அகலம் மற்றும் எண்ணிக்கையை அமைக்கும் சுருக்கெழுத்து சொத்து.
வெளிப்படையான நெடுவரிசை முறிவுகள், உள்ளடக்கம் மற்றும் உயரக் கட்டுப்பாடுகள் போன்ற பிற காரணிகள் நெடுவரிசைகளின் உண்மையான எண்ணிக்கை மற்றும் அகலத்தைப் பாதிக்கலாம்.
1.1 நெடுவரிசை அகலம்: நெடுவரிசை அகல சொத்து
நெடுவரிசை-அகலப் பண்பு ஒவ்வொரு நெடுவரிசையும் ஆக்கிரமிக்க வேண்டிய குறைந்தபட்ச அகலத்தைக் குறிப்பிடுகிறது.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை அகலம்: 100px நெடுவரிசை அகலம்: 10எம் நெடுவரிசை அகலம்: 3.3vw; நெடுவரிசை அகலம்: பரம்பரை; நெடுவரிசை அகலம்: ஆரம்ப;
1.2 நெடுவரிசைகளின் எண்ணிக்கை: நெடுவரிசை எண்ணிக்கை சொத்து
நெடுவரிசை-எண்ணிக்கை சொத்து நெடுவரிசைகளின் எண்ணிக்கையை விவரிக்கிறது, மேலும் அவற்றின் அகலம் கிடைக்கும் இடத்தின் அகலத்தின் அடிப்படையில் கணக்கிடப்படும். நெடுவரிசை-அகலம் நெடுவரிசை-எண்ணிக்கையின் அதே நேரத்தில் குறிப்பிடப்பட்டால், நெடுவரிசை எண்ணிக்கையின் மதிப்பு அதிகபட்ச நெடுவரிசைகளின் எண்ணிக்கையாகக் கருதப்படும்.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை எண்ணிக்கை: ஆட்டோ; நெடுவரிசை எண்ணிக்கை: 2; நெடுவரிசை எண்ணிக்கை: பரம்பரை; நெடுவரிசை எண்ணிக்கை: ஆரம்ப;
1.3 ஒற்றை நெடுவரிசை பண்புடன் நெடுவரிசைகளை அமைத்தல்
நெடுவரிசைகளின் சொத்து என்பது நெடுவரிசை அகலம் மற்றும் நெடுவரிசை எண்ணிக்கையை அமைப்பதற்கான சுருக்கெழுத்து சொத்து ஆகும். தவிர்க்கப்பட்ட மதிப்புகள் அவற்றின் ஆரம்ப மதிப்புகளுக்கு அமைக்கப்பட்டுள்ளன.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசைகள்: 12எம்; /* நெடுவரிசை அகலம்: 12em; நெடுவரிசை எண்ணிக்கை: ஆட்டோ */ நெடுவரிசைகள்: ஆட்டோ 12எம்; /* நெடுவரிசை அகலம்: 12em; நெடுவரிசை எண்ணிக்கை: ஆட்டோ */ நெடுவரிசைகள்: 2; /* நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை எண்ணிக்கை: 2 */ நெடுவரிசைகள்: 2 ஆட்டோ; /* நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை எண்ணிக்கை: 2 */ நெடுவரிசைகள்: தானியங்கு; /* நெடுவரிசை அகலம்: தானியங்கு; column-count: auto */ columns: auto auto; /* நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை எண்ணிக்கை: தானியங்கு */ நெடுவரிசைகள்: மரபுரிமை; பத்திகள்: ஆரம்ப;
2. நெடுவரிசை இடைவெளி மற்றும் பிரிக்கும் கோடுகள்
நெடுவரிசை இடைவெளி மற்றும் பிரிப்பான் கோடுகள் ஒற்றை பல நெடுவரிசை கொள்கலனில் நெடுவரிசைகளுக்கு இடையில் வைக்கப்படுகின்றன. இடைவெளிகள் மற்றும் பிரிப்பான்களின் நீளம் நெடுவரிசையின் உயரத்திற்கு சமம். நெடுவரிசை இடைவெளிகள் இடத்தை எடுத்துக்கொள்கின்றன, அதாவது, அவை அருகிலுள்ள நெடுவரிசைகளில் உள்ளடக்கத்தைத் தள்ளுகின்றன.
நெடுவரிசைகளுக்கு இடையிலான இடைவெளியின் நடுவில் எந்த இடத்தையும் எடுக்காமல் பிரிக்கும் கோடு வரையப்படுகிறது. அதாவது, பிரிக்கும் கோட்டின் இருப்பு அல்லது தடிமன் வேறு எதையும் மாற்றாது.
பல நெடுவரிசை உறுப்புகளின் எல்லைக்கு மேலே கோடுகள் நிரப்பப்பட்டுள்ளன. உறுப்பு உருள் பகுதியைக் கொண்டிருந்தால், பிரிப்பான் கோடுகள் நெடுவரிசைகளுடன் உருட்டும். உள்ளடக்கத்தைக் கொண்ட இரண்டு நெடுவரிசைகளுக்கு இடையில் மட்டுமே பிரிப்புக் கோடுகள் காட்டப்படும்.
2.1 நெடுவரிசைகளுக்கு இடையிலான இடைவெளி: நெடுவரிசை-இடைவெளி சொத்து
நெடுவரிசை இடைவெளி பண்பு நெடுவரிசைகளுக்கு இடையிலான இடைவெளியை வரையறுக்கிறது. நெடுவரிசைகள் நெடுவரிசை-விதி சொத்தைப் பயன்படுத்தி பிரிப்பான் கோடு அமைக்கப்பட்டிருந்தால், இந்த வரி இடைவெளியின் நடுவில் அமைந்திருக்கும், மேலும் அதன் அகலம் ஒட்டுமொத்த அகலத்தை மாற்றாது.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை-இடைவெளி: சாதாரண; நெடுவரிசை இடைவெளி: 3px; நெடுவரிசை இடைவெளி: 2.5எம்; நெடுவரிசை இடைவெளி: 3% நெடுவரிசை-இடைவெளி: மரபுரிமை; நிரல் இடைவெளி: ஆரம்ப;
2.2 பிரிப்பான் வரி நிறம்: நெடுவரிசை-விதி-வண்ண சொத்து
நெடுவரிசை-விதி-வண்ணப் பண்பு பிரிப்பான் வரியின் நிறத்தைக் குறிப்பிடுகிறது.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை-விதி-நிறம்: இளஞ்சிவப்பு; நெடுவரிசை-விதி-நிறம்: #D71C3B; நெடுவரிசை-விதி-நிறம்: rgb(192, 56, 78); நெடுவரிசை-விதி-நிறம்: வெளிப்படையானது; நிரல்-விதி-நிறம்: hsla(0, 100%, 50%, 0.6); நிரல்-விதி-நிறம்: பரம்பரை; நிரல்-விதி-நிறம்: ஆரம்ப;
2.3 பிரிப்பான் வரி நடை: நெடுவரிசை-விதி-பாணி சொத்து
நெடுவரிசை-விதி-பாணி சொத்து பிரிப்பான் வரியின் பாணியை அமைக்கிறது.
சொத்து பரம்பரை அல்ல.
| நிரல்-விதி-பாணி | |
|---|---|
| மதிப்புகள்: | |
| எதுவும் இல்லை | மதிப்பு 0 ஆக மதிப்பிடப்படுகிறது. இயல்புநிலை மதிப்பு. |
| மறைக்கப்பட்டுள்ளது | அதுபோலவே இல்லை என்ற மதிப்புடன், கோடு மறைக்கப்பட்டுள்ளது. |
| புள்ளியிடப்பட்ட | ஒரு வரியை சதுர புள்ளிகளின் தொகுப்பாகக் காட்டுகிறது. |
| கோடு போட்டது | கோடுகளின் தொடராக ஒரு வரியைக் காட்டுகிறது. |
| திடமான | இயல்பான வரி. |
| இரட்டை | இரண்டு இணையான மெல்லிய கோடுகள் இடைவெளியில் பிரிக்கும் கோட்டைக் காட்டுகிறது. பிரிப்பான் கோட்டின் அகலம் குறிப்பிடப்படவில்லை, ஆனால் கோடுகளின் கூட்டுத்தொகை மற்றும் அவற்றுக்கிடையேயான இடைவெளி நெடுவரிசை-விதி-அகலத்தின் மதிப்புக்கு சமம். |
| பள்ளம் | கேன்வாஸில் அழுத்தப்பட்ட 3D வரியைக் காட்டுகிறது. இரண்டு நிறங்கள் கொண்ட நிழலை உருவாக்குவதன் மூலம் இது அடையப்படுகிறது, ஒன்று இருண்ட மற்றும் ஒரு இலகுவானது. |
| மேடு | தொகுதியின் பிரிக்கும் கோட்டைக் காட்டுகிறது, அதாவது. பள்ளத்தின் எதிர் விளைவு . |
| உட்செலுத்துதல் | குறிப்பிட்ட வரி நிறத்தை விட இருண்ட ஒரு திடமான கோட்டைக் காட்டுகிறது. |
| ஆரம்பம் | நெடுவரிசை-விதி-வண்ணப் பண்புகளால் குறிப்பிடப்பட்ட வண்ணத்தில் திடமான கோட்டைக் காட்டுகிறது. |
| ஆரம்ப | ஒரு சொத்தின் மதிப்பை அதன் இயல்புநிலை மதிப்பாக அமைக்கிறது. |
| மரபுரிமையாக | சொத்து மதிப்பை பெற்றோர் உறுப்பிலிருந்து பெறுகிறது. |
தொடரியல்
நெடுவரிசை-விதி-பாணி: எதுவுமில்லை; நிரல்-விதி-பாணி: மறைக்கப்பட்ட; நிரல்-விதி-பாணி: புள்ளியிடப்பட்ட; நிரல்-விதி-பாணி: கோடு; நிரல்-விதி-பாணி: திடமான; நிரல்-விதி-பாணி: இரட்டை; நிரல்-விதி-பாணி: பள்ளம்; நிரல்-விதி-பாணி: மேடு; நிரல்-விதி-பாணி: உள்ளீடு; நிரல்-விதி-பாணி: ஆரம்பம்; நிரல்-விதி-பாணி: மரபுரிமை; நிரல்-விதி-பாணி: ஆரம்ப;
2.4 பிரிப்பான் வரி அகலம்: நெடுவரிசை-விதி-அகலம் பண்பு
நெடுவரிசை-விதி-அகலம் பண்பு பிரிப்பான் கோட்டின் அகலத்தை அமைக்கிறது. எதிர்மறை மதிப்புகள் அனுமதிக்கப்படாது. நெடுவரிசை-விதி-பாணி சொத்து இல்லாமல் வேலை செய்யாது.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை-விதி-அகலம்: மெல்லிய; நெடுவரிசை-விதி-அகலம்: நடுத்தர; நெடுவரிசை-விதி-அகலம்: தடித்த; நெடுவரிசை-விதி-அகலம்: 1px; நெடுவரிசை-விதி அகலம்: 2.5எம் நெடுவரிசை-விதி-அகலம்: பரம்பரை; நிரல்-விதி-அகலம்: ஆரம்ப;
2.5 பிரிப்பான் வரி பண்புகள் சுருக்கெழுத்து: நெடுவரிசை-விதி சொத்து
நெடுவரிசை-விதி சொத்து என்பது நெடுவரிசை-விதி-அகல பண்புகளுக்கான சுருக்கெழுத்து-விதி-பாணி நிரல்-விதி-நிறம் .
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை-விதி: புள்ளியிடப்பட்ட; நிரல் விதி: திட 8px; நிரல்-விதி: திட நீலம்; நிரல்-விதி: தடித்த உட்செலுத்தப்பட்ட நீலம்; நிரல்-விதி: பரம்பரை; நிரல் விதி: ஆரம்பம்;
3. நெடுவரிசை முறிவு
பல நெடுவரிசைகளில் உள்ளடக்கம் வைக்கப்படும் போது, நெடுவரிசை முறிவுகள் எங்கு வைக்கப்படுகின்றன என்பதை உலாவி தீர்மானிக்க வேண்டும். உள்ளடக்கத்தை நெடுவரிசைகளாகப் பிரிப்பதில் உள்ள சிக்கல், உள்ளடக்கத்தை பக்கங்களாகப் பிரிப்பதைப் போன்றது. இந்தச் சிக்கலைத் தீர்க்க, மூன்று புதிய பண்புகள் அறிமுகப்படுத்தப்பட்டுள்ளன, அவை பக்க முறிவுகளின் அதே பண்புகளில் நெடுவரிசை முறிவுகளை விவரிக்க அனுமதிக்கின்றன: இடைவேளைக்கு முன் , இடைவேளைக்குப் பிறகு , மற்றும் பிரேக்-இன்சைட் .
4. நெடுவரிசை span: column-span பண்பு
நெடுவரிசை-ஸ்பான் பண்பு ஒரு உறுப்பை பல நெடுவரிசைகளை பரப்ப அனுமதிக்கிறது. இது கொள்கலன் தொகுதிக்காக குறிப்பிடப்படவில்லை, ஆனால் உள்ளே உள்ள ஒரு குறிப்பிட்ட உறுப்புக்காக, எடுத்துக்காட்டாக, தலைப்புக்கு.
எதிர்காலத்தில், அட்டவணைக் கலத்திற்குப் பயன்படுத்தக்கூடிய கோல்ஸ்பான் பண்புக்கூறைப் போலவே, விரிவடைய வேண்டிய நெடுவரிசைகளின் எண்ணிக்கையைக் குறிப்பிட முடியும், ஆனால் CSS3 விவரக்குறிப்பில் இரண்டு சாத்தியமான மதிப்புகள் மட்டுமே உள்ளன: எதுவும் இல்லை மற்றும் அனைத்தும் .
ஃபயர்பாக்ஸில் இயல்புநிலையாக சொத்து வேலை செய்யாது. பயனர் வெளிப்படையாக அம்சத்தை இயக்க வேண்டும், layout.css.column-span.enabled என்பதை true என அமைக்க வேண்டும். பயர்பாக்ஸில் அமைப்புகளை மாற்ற, about:config க்குச் செல்லவும்.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை இடைவெளி: இல்லை column-span: அனைத்து; column-span: பரம்பரை; column-span: ஆரம்ப;
5. உள்ளடக்கத்துடன் நெடுவரிசைகளை நிரப்புதல்: நெடுவரிசை-நிரப்பு சொத்து
நெடுவரிசைகள் உள்ளடக்கத்தால் எவ்வாறு நிரப்பப்படுகின்றன என்பதை நெடுவரிசை நிரப்பு பண்புக் கட்டுப்படுத்துகிறது. நெடுவரிசைகளை நிரப்புவதற்கு இரண்டு உத்திகள் உள்ளன: நெடுவரிசைகள் உயரத்தில் சீரமைக்கப்படலாம் அல்லது இல்லை. நெடுவரிசைகள் சீரமைக்கப்பட்டிருந்தால், கட்டாய இடைவெளிகள், விதவைகள், அனாதைகள் மற்றும் நெடுவரிசை உயரத்தை பாதிக்கும் பிற பண்புகளை கணக்கில் எடுத்துக்கொண்டு, நெடுவரிசை உயர மாற்றங்களைக் குறைக்க உலாவிகள் முயற்சிக்க வேண்டும். நெடுவரிசைகள் சீரமைக்கப்படாவிட்டால், அவை வரிசையாக நிரப்பப்படும், அவற்றில் சில பகுதியளவு நிரப்பப்படலாம் அல்லது நிரப்பப்படாமல் இருக்கலாம்.
சொத்து பரம்பரை அல்ல.
தொடரியல்
நெடுவரிசை-நிரப்பு: தானியங்கு; நெடுவரிசை-நிரப்பு: சமநிலை; நெடுவரிசை-நிரப்பு: சமநிலை-அனைத்து; நிரலை நிரப்புதல்: மரபுரிமை; நிரலை நிரப்புதல்: ஆரம்ப;
6. வழிதல்
6.1 மல்டிகோலம் கொள்கலன்களுக்குள் நிரம்பி வழிகிறது
இது நெடுவரிசையை உடைக்கும் இடங்களைத் தவிர, நெடுவரிசையின் எல்லைக்கு அப்பால் நீட்டிக்கப்படும் உள்ளடக்கம் நெடுவரிசையின் எல்லைக்கு அப்பால் நீண்டு, துண்டிக்கப்படாது. இது முதன்மையாக படங்களுக்கு பொருந்தும். இந்த சிக்கலை தீர்க்க, நீங்கள் படங்களுக்கு பின்வரும் பண்புகளை அமைக்க வேண்டும்:
Img (காட்சி: தொகுதி; /* படத்தின் கீழ் உள்ள திணிப்பை அகற்றவும் */ அகலம்: 100%; /* கொள்கலன் தொகுதியின் முழு அகலத்திற்கு படத்தை நீட்டவும் */ )
6.2 மல்டிகோலம் கொள்கலன்களுக்கு வெளியே பேஜினேஷன் மற்றும் வழிதல்
பல நெடுவரிசை கொள்கலனின் விளிம்புகளில் உள்ள நெடுவரிசைகளுக்கு அப்பால் நீட்டிக்கப்படும் உள்ளடக்கம் மற்றும் பிரிப்பான் கோடுகள் வழிதல் பண்புக்கு ஏற்ப வெட்டப்படுகின்றன.
நெடுவரிசை உயரக் கட்டுப்பாடுகள் (எ.கா. உயரம் அல்லது அதிகபட்ச உயரம் வழியாக) மற்றும் வெளிப்படையான நெடுவரிசை முறிவுகள் காரணமாக, பல நெடுவரிசை கொள்கலனில் இடம் இருப்பதை விட அதிக நெடுவரிசைகள் இருக்கலாம். இந்த வழக்கில், கூடுதல் நெடுவரிசைகள் வரிசையின் திசையில் உருவாக்கப்பட்டு, அடுத்த பக்கங்களுக்கு நகரும்.
தி CSS பல நெடுவரிசை தளவமைப்பு தொகுதிநீட்டிக்கிறது தொகுதி அமைப்பு முறைஉரையின் பல நெடுவரிசைகளின் எளிதான வரையறையை அனுமதிக்கும்.வரிகள் மிக நீளமாக இருந்தால் மக்கள் உரையைப் படிப்பதில் சிக்கல் உள்ளது; ஒரு வரியின் முடிவில் இருந்து அடுத்த வரியின் தொடக்கத்திற்கு கண்கள் நகர்வதற்கு அதிக நேரம் எடுத்துக் கொண்டால், அவை எந்த வரியில் இருந்தன என்பதைக் கண்காணிக்கும். எனவே, ஒரு பெரிய திரையை அதிகபட்சமாகப் பயன்படுத்த, செய்தித்தாள்கள் செய்வது போல், ஆசிரியர்கள் வரையறுக்கப்பட்ட அகல நெடுவரிசைகளை அருகருகே வைக்க வேண்டும்.
துரதிர்ஷ்டவசமாக, நிலையான நிலைகளில் நெடுவரிசை இடைவெளிகளை கட்டாயப்படுத்தாமல் அல்லது உரையில் அனுமதிக்கப்பட்ட மார்க்அப்பைக் கடுமையாகக் கட்டுப்படுத்தாமல் அல்லது ஹீரோயிக் ஸ்கிரிப்டிங்கைப் பயன்படுத்தாமல் CSS மற்றும் HTML உடன் இதைச் செய்ய இயலாது. பாரம்பரிய பிளாக் லேஅவுட் பயன்முறையை நீட்டிக்க புதிய CSS பண்புகளைச் சேர்ப்பதன் மூலம் இந்த வரம்பு தீர்க்கப்படுகிறது.
நெடுவரிசைகளைப் பயன்படுத்துதல்
நெடுவரிசை எண்ணிக்கை மற்றும் அகலம்
இரண்டு CSS பண்புகள், எத்தனை நெடுவரிசைகள் தோன்ற வேண்டும் என்பதைக் கட்டுப்படுத்துகின்றன: நெடுவரிசை எண்ணிக்கை மற்றும் நெடுவரிசை அகலம் .
நெடுவரிசை-எண்ணிக்கை பண்பு ஒரு குறிப்பிட்ட எண்ணுக்கு நெடுவரிசைகளின் எண்ணிக்கையை அமைக்கிறது. எ.கா.,
உதாரணம் 1
HTML
லோரெம் இப்சம் டோலர் சிட் அமெட், கன்செக்டெர் அடிபிசிசிங் எலிட், செட் டூ ஈயுஸ்மோட் டெம்பர் இன்சிடிடுண்ட் யுட் லேபர் மற்றும் டோலோர் மேக்னா அலிகா.
ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Pariatur.
எக்செப்டியூர் சின்ட் ஓகேகாட் குபிடாடட் நோன் ப்ரோடென்ட், சன்ட் இன் கல்பா குய் ஆஃபிசியா டெஸரண்ட் மோலிட் அனிம் ஐடி எஸ்ட் லேபர்.
css
#col (நெடுவரிசை எண்ணிக்கை: 2;)விளைவாக
உள்ளடக்கத்தை இரண்டு நெடுவரிசைகளில் காண்பிக்கும் (நீங்கள் பல நெடுவரிசை இணக்கமான உலாவியைப் பயன்படுத்துகிறீர்கள் என்றால்):
நெடுவரிசை-அகல பண்பு குறைந்தபட்ச விரும்பிய நெடுவரிசை அகலத்தை அமைக்கிறது. நெடுவரிசை எண்ணிக்கையும் அமைக்கப்படவில்லை எனில், உலாவி தானாகவே கிடைக்கக்கூடிய அகலத்தில் பொருந்தக்கூடிய பல நெடுவரிசைகளை உருவாக்கும்.
உதாரணம் 2
HTML
css
#அகலம் (நெடுவரிசை-அகலம்: 100px; )விளைவாக
பல நெடுவரிசைத் தொகுதியில், தேவைக்கேற்ப உள்ளடக்கம் தானாகவே ஒரு நெடுவரிசையில் இருந்து அடுத்த நெடுவரிசைக்கு பாய்கிறது. எடிட்டிங் மற்றும் பிரிண்டிங் போன்ற அனைத்து HTML, CSS மற்றும் DOM செயல்பாடுகளும் நெடுவரிசைகளுக்குள் ஆதரிக்கப்படுகின்றன.
நெடுவரிசைகள் சுருக்கெழுத்து
பெரும்பாலான நேரங்களில், ஒரு வலை வடிவமைப்பாளர் இரண்டு CSS பண்புகளில் ஒன்றைப் பயன்படுத்துவார்: நெடுவரிசை எண்ணிக்கை அல்லது நெடுவரிசை அகலம் . இந்த பண்புகளுக்கான மதிப்புகள் ஒன்றுடன் ஒன்று சேராததால், சுருக்கெழுத்து நெடுவரிசைகளைப் பயன்படுத்துவது பெரும்பாலும் வசதியானது. எ.கா.
CSS அறிவிப்பு நெடுவரிசை அகலம்: 12em நெடுவரிசைகளால் மாற்றப்படலாம்: 12em .
எடுத்துக்காட்டு 3
HTML
css
#col_short ( நெடுவரிசைகள்: 12em; )CSS அறிவிப்பு நெடுவரிசை எண்ணிக்கை: 4ஐ நெடுவரிசைகளால் மாற்றலாம்: 4 .
எடுத்துக்காட்டு 4
HTML
css
#நெடுவரிசைகள்_4 (நெடுவரிசைகள்: 4;)விளைவாக
இரண்டு CSS அறிவிப்புகள் நெடுவரிசை அகலம்: 8em மற்றும் நெடுவரிசை எண்ணிக்கை: 12 ஆகியவை நெடுவரிசைகளால் மாற்றப்படலாம்: 12 8em .
உதாரணம் 5
HTML
css
#நெடுவரிசைகள்_12 (நெடுவரிசைகள்: 12 8em; )விளைவாக
உயர சமநிலை
CSS3 நெடுவரிசை விவரக்குறிப்புக்கு நெடுவரிசை உயரங்கள் சமநிலையில் இருக்க வேண்டும்: அதாவது, உலாவி தானாகவே அதிகபட்ச நெடுவரிசை உயரத்தை அமைக்கிறது, இதனால் ஒவ்வொரு நெடுவரிசையிலும் உள்ள உள்ளடக்கத்தின் உயரம் தோராயமாக சமமாக இருக்கும். Firefox இதைச் செய்கிறது.
இருப்பினும், சில சூழ்நிலைகளில், நெடுவரிசைகளின் அதிகபட்ச உயரத்தை வெளிப்படையாக அமைப்பதும் பயனுள்ளதாக இருக்கும், பின்னர் முதல் நெடுவரிசையில் தொடங்கி தேவையான பல நெடுவரிசைகளை உருவாக்கி, வலதுபுறம் நிரம்பி வழியும். எனவே, உயரம் கட்டுப்படுத்தப்பட்டால், பல நெடுவரிசைத் தொகுதியில் CSS உயரம் அல்லது அதிகபட்ச உயர பண்புகளை அமைப்பதன் மூலம், ஒவ்வொரு நெடுவரிசையும் அந்த உயரத்திற்கு வளர அனுமதிக்கப்படும், மேலும் புதிய நெடுவரிசையைச் சேர்ப்பதற்கு முன். இந்த முறை தளவமைப்பிற்கு மிகவும் திறமையானது.
நெடுவரிசை இடைவெளிகள்
நெடுவரிசைகளுக்கு இடையில் ஒரு இடைவெளி உள்ளது. பரிந்துரைக்கப்பட்ட இயல்புநிலை 1em ஆகும். பல நெடுவரிசைத் தொகுதிக்கு நெடுவரிசை-இடைப் பண்புகளைப் பயன்படுத்துவதன் மூலம் இந்த அளவை மாற்றலாம்:
எடுத்துக்காட்டு 6
HTML
css
#நெடுவரிசை_இடைவெளி (நெடுவரிசை எண்ணிக்கை: 5; நெடுவரிசை-இடைவெளி: 2எம்; )விளைவாக
அழகான சீரழிவு
நெடுவரிசை பண்புகள் அல்லாத நெடுவரிசைகளை ஆதரிக்கும் உலாவிகளால் புறக்கணிக்கப்படும். எனவே அந்த உலாவிகளில் ஒரு நெடுவரிசையில் காண்பிக்கப்படும் மற்றும் உலாவிகளை ஆதரிக்கும் பல நெடுவரிசைகளைப் பயன்படுத்தும் தளவமைப்பை உருவாக்குவது ஒப்பீட்டளவில் எளிதானது.
முடிவுரை
CSS3 நெடுவரிசைகள் ஒரு பழமையான தளவமைப்பு ஆகும், இது வலை உருவாக்குநர்கள் திரை ரியல் எஸ்டேட்டை சிறப்பாகப் பயன்படுத்த உதவும். கற்பனைத்திறன் கொண்ட டெவலப்பர்கள் அவற்றுக்கான பல பயன்பாடுகளைக் காணலாம், குறிப்பாக தானியங்கி உயரத்தை சமநிலைப்படுத்தும் அம்சத்துடன்.
பல நெடுவரிசைகளில் ஒரு பக்கத்தில் உரையை எவ்வாறு ஒழுங்கமைப்பது? மேலும் இது தானாகவே செய்ய முடியுமா? நிச்சயமாக, உங்களில் பலர் இணைய மேம்பாட்டில் ஈடுபட்டுள்ளவர்கள் அல்லது அத்தகைய பணியை எதிர்கொண்டுள்ளனர் - மேலும் தந்திரமான பாணிகள் அல்லது கூடுதல் ஜாவாஸ்கிரிப்ட் லைப்ரரிகளின் பயன்பாடு தேவைப்படும் சிக்கலான தீர்வுகளை அடிக்கடி எதிர்கொள்கின்றனர் (எடுத்துக்காட்டாக, jQuery க்கான Columnizer செருகுநிரலைப் பார்க்கவும்).
பல நெடுவரிசை உள்ளடக்க தளவமைப்பு (பொது பல நெடுவரிசை பக்க தளவமைப்பு பணியுடன் குழப்பமடையக்கூடாது, இது ஒரு கட்டத்தில் தொகுதிகளை ஒழுங்கமைப்பதில் உள்ள சிக்கலுக்கு மிகவும் நெருக்கமானது) நீண்ட காலமாக இணைய தரநிலை உலகில் அதன் வழியை உருவாக்கி, இறுதியாக, வேட்பாளர் பரிந்துரையின் நிலையை அடைந்தது மட்டுமல்லாமல், அதனுடன் தொடர்புடைய சிஎஸ்எஸ் 3 வடிவில் நியாயமான ஆதரவையும் பெறுகிறது. உலாவிகளில்: முன்னொட்டுகள் (-moz- அல்லது -webkit-) மற்றும் எங்கோ உண்மையான (Opera 11 .1+) மற்றும் திட்டமிடப்பட்ட பதிப்புகள் (IE10+) மற்றும் உடனடியாக முன்னொட்டுகள் இல்லாமல்.
கருத்து
இன்டர்நெட் எக்ஸ்புளோரர் 10ஐப் பொறுத்தவரை, HTML/CSS/JSஐப் பயன்படுத்தி Windows 8 மெட்ரோ-பாணி பயன்பாடுகளை உருவாக்கும்போது CSS3 மல்டி-நெடுவரிசையைப் பயன்படுத்தலாம்.
இந்தக் கட்டுரையின் நோக்கங்களுக்காக, குறியீட்டைக் குழப்ப உலாவி முன்னொட்டுகளைப் பயன்படுத்த மாட்டேன், ஆனால் உண்மையான பயன்பாட்டில், Firefox, Safari மற்றும் Chrome ஆகியவற்றிற்கான முன்னொட்டு ஆதரவைச் சேர்க்க மறக்காதீர்கள்.
மேலும் இரண்டு முக்கியமான விவரங்களை உடனடியாகக் குறிப்பிடுகிறேன்.
முதலாவதாக, பெரும்பாலான சந்தர்ப்பங்களில், உரைக்கான பல நெடுவரிசை தளவமைப்பைப் பயன்படுத்துவது முற்போக்கான மேம்படுத்தல் பாதையில் தள உள்ளடக்கத்தின் காட்சியின் வளர்ச்சியாகக் கருதப்படலாம், அதற்குள் நவீன தளங்களின் பயனர்கள் அதிக நன்மைகளைப் பெறுவார்கள்:
இரண்டாவதாக, மீடியா வினவல்களின் திறன்களுடன் (மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பு யோசனைகள்,) பல நெடுவரிசை காட்சி நன்றாக வேலை செய்கிறது, எடுத்துக்காட்டாக, வெவ்வேறு திரை அளவுகளில், நீங்கள் உரையை வெவ்வேறு நெடுவரிசைகளாக வடிவமைக்கலாம்:
அறிமுகத்தில் கடைசியாக நான் கவனிக்க விரும்புவது, இதைப் பற்றி மேலும் பேசாமல், தொழில்நுட்ப விவரங்களுக்கு தெளிவான மனசாட்சியுடன் செல்ல வேண்டாம்: பல நெடுவரிசை உரை அமைப்பைப் பயன்படுத்தும் போது, அத்தகைய ஏற்பாடு ஒரு குறிப்பிட்ட வாசிப்பு வரிசையையும் (ஐரோப்பிய மொழிகளுக்கு இடமிருந்து வலமாக) குறிக்கிறது என்பதை நினைவில் கொள்ள வேண்டும். எனவே, பார்வையை ஒரு நெடுவரிசையிலிருந்து மற்றொரு நெடுவரிசைக்கு மாற்ற, முடிந்தவரை சில கூடுதல் செயல்களைச் செய்வது அவசியம், குறிப்பாக செங்குத்து சுருள்களுக்கு:
இந்த அர்த்தத்தில், நெடுவரிசைகளின் கிடைமட்ட தன்மை கிடைமட்ட ஸ்க்ரோலிங்குடன் சிறப்பாக இணைக்கப்பட்டுள்ளது (இது Win8 க்கான பல பயன்பாடுகளில் பயன்படுத்தப்படுகிறது - எடுத்துக்காட்டாக, இது USA Today பயன்பாட்டில் தெளிவாகக் காணப்படுகிறது):
பொதுவாக, பேச்சாளர்கள் சிறந்தவர்கள், ஆனால் பயனர்களின் வசதியைப் பற்றி மறந்துவிடாதீர்கள். இப்போது போராட வேண்டும்!
பேச்சாளர்கள்
எனவே, பல நெடுவரிசைகளில் வைக்க விரும்பும் உரை (உள்ளடக்கம்) எங்களிடம் உள்ளது. எங்கு தொடங்குவது?
அத்தகைய உறுப்பை பல நெடுவரிசை உறுப்புகளாக மாற்ற, CSS பாணிகள் மூலம் பின்வரும் பண்புகளில் ஒன்றை அமைக்க வேண்டும்: நெடுவரிசை-அகலம்அல்லது நெடுவரிசை எண்ணிக்கைதவிர வேறு ஒரு மதிப்புக்கு ஆட்டோ. உதாரணத்திற்கு,
உரையை இரண்டு நெடுவரிசைகளாகப் பிரிக்க, இதைச் செய்யுங்கள்:
கட்டுரை (நெடுவரிசை எண்ணிக்கை: 2; )
உலாவி மீதமுள்ளவற்றைச் செய்யும்: 
மாற்று சொத்து - நெடுவரிசை-அகலம்- நெடுவரிசைகளின் உகந்த அகலத்தை அமைக்க உங்களை அனுமதிக்கிறது:
கட்டுரை (நெடுவரிசை அகலம்: 150px; )
அதே நேரத்தில், குறிப்பிட்ட நெடுவரிசையின் அகலத்தை சரிசெய்து, வெளிப்புற கொள்கலனை நிரப்புவதற்கு தேவையான நெடுவரிசைகளின் எண்ணிக்கையில் உள்ளடக்கத்தை உலாவியே உடைக்கிறது. முக்கியமான விஷயம் என்னவென்றால் உண்மையான அகலம் குறிப்பிடப்பட்டதிலிருந்து வேறுபடலாம்மேலே அல்லது கீழ்: மேலே உள்ள படத்தில், சாம்பல் பட்டை சரியாக 150px அகலம் கொண்டது - நீங்கள் பார்க்க முடியும் என, இது நெடுவரிசையின் உண்மையான அகலத்தை விட சிறியது.
இந்த நடத்தை விவரக்குறிப்பால் வரையறுக்கப்படுகிறது மற்றும் பதிலளிக்கக்கூடிய மார்க்அப்பை உருவாக்கும்போது (தானாகவே) அதிக நெகிழ்வுத்தன்மையை அனுமதிக்கிறது:
எடுத்துக்காட்டாக, உங்களிடம் 100px அகலமான கொள்கலன் இருந்தால், நீங்கள் நெடுவரிசைகளை 45px அகலத்திற்கு அமைத்தால், இரண்டு நெடுவரிசைகள் மட்டுமே பொருந்தும் என்று உலாவி கருதும், மேலும் முழு இடத்தையும் நிரப்ப, ஒவ்வொன்றின் அளவையும் 50px ஆக அதிகரிக்கும். (இது நெடுவரிசைகளுக்கு இடையிலான இடைவெளியையும் கணக்கில் எடுத்துக்கொள்கிறது, இது அடுத்த பகுதியில் விவாதிக்கப்படும்.)
ஒரு வகையில், இது சாளரத்தின் அளவைப் பொறுத்து மீடியா வினவல்களைப் பயன்படுத்தி வெவ்வேறு எண்ணிக்கையிலான நெடுவரிசைகளைக் குறிப்பிடுவதற்கும், நெடுவரிசை அகலங்களைத் தானாகக் கணக்கிடுவதற்கும் மாற்றாகக் காணலாம்:
@media (குறைந்த அகலம்:400px) (கட்டுரை (நெடுவரிசை எண்ணிக்கை: 2;) ) @media (குறைந்த அகலம்:600px) (கட்டுரை (நெடுவரிசை எண்ணிக்கை: 3; ) ...
நான் இரண்டாவது முறையாக மாற்று வழியைப் பற்றி பேசுகிறேன் - அதற்கான காரணம் இங்கே.
எண்ணிக்கை எதிராக அகலம்
மேலே உள்ள விளக்கத்திலிருந்து தெளிவாக இருக்க வேண்டும் என்பதால், விவரக்குறிப்பு நெடுவரிசைகளின் எண்ணிக்கை மற்றும் அகலத்தை அமைக்க இரண்டு வழிகளை வழங்குகிறது (அதன் மூலம், இது எல்லா நெடுவரிசைகளுக்கும் ஒரே மாதிரியாக இருக்கும்!):- நெடுவரிசை எண்ணிக்கைநீங்கள் உள்ளடக்கத்தை பிரிக்க விரும்பும் நெடுவரிசைகளின் எண்ணிக்கையைக் குறிப்பிட உங்களை அனுமதிக்கிறது, அதே நேரத்தில் நெடுவரிசைகளின் அகலம் உலாவியால் தீர்மானிக்கப்படுகிறது, கிடைக்கும் இடத்தை கணக்கில் எடுத்துக்கொள்கிறது.
- நெடுவரிசை-அகலம்பின்புறத்திலிருந்து வருகிறது: நெடுவரிசைகள் தோராயமாக என்னவாக இருக்க வேண்டும் என்பதைக் குறிக்கிறது, இருப்பினும், அவற்றின் எண்ணிக்கையின் கணக்கீட்டை உலாவியின் விருப்பத்திற்கு விட்டுவிடுகிறது.
நெடுவரிசைகள்: 12எம்; /* நெடுவரிசை அகலம்: 12em; நிரல் எண்ணிக்கை: தானியங்கு; */ நெடுவரிசைகள்: 2; /* நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை எண்ணிக்கை: 2; */நெடுவரிசைகள்: ஆட்டோ; /* நெடுவரிசை அகலம்: தானியங்கு; நிரல் எண்ணிக்கை: தானியங்கு; */ நெடுவரிசைகள்: ஆட்டோ 12எம்; /* நெடுவரிசை அகலம்: 12em; நிரல் எண்ணிக்கை: தானியங்கு; */நெடுவரிசைகள்: 2 ஆட்டோ; /* நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை எண்ணிக்கை: 2; */
நெடுவரிசைகளின் எண்ணிக்கை மற்றும் உகந்த அகலம் இரண்டையும் குறிப்பிட்டால் என்ன நடக்கும்? விவரக்குறிப்பு படி, இந்த வழக்கில் நெடுவரிசை எண்ணிக்கைநெடுவரிசைகளின் அதிகபட்ச எண்ணிக்கையை வரையறுக்கிறது:
கட்டுரை (நெடுவரிசைகள்: 150px 3; /* நெடுவரிசை-அகலம்: 150px; நெடுவரிசை எண்ணிக்கை: 3; */ )
உண்மையில், CSS3 பற்றிய எனது சில கட்டுரைகள் உட்பட வலைத் தரநிலைகளின் பரிணாம வளர்ச்சியைப் பின்பற்றி (உதாரணமாகப் பார்க்கவும்), இணைய உருவாக்குநர்களுக்கு குறைவான உத்வேகத்துடன் திறக்கும் சாத்தியக்கூறுகளை நீங்கள் பார்ப்பீர்கள் என்று நம்புகிறேன். பதிலளிக்கக்கூடிய, நெகிழ்வான மற்றும் சக்திவாய்ந்த உள்ளடக்க மேலாண்மை கருவிகள் மேலும் மேலும் நெருக்கமாகி வருகின்றன. மேலும் சிக்கலான சிக்கல்களைத் தீர்ப்பது எளிதாகிறது.
ஊடாடும்
ieetestdrive.com இல் CSS3 மல்டி-நெடுவரிசையுடன் நீங்கள் விளையாடலாம்:
முயற்சி, பரிசோதனை. உலாவி டெவலப்பர்களுக்கு பிழைகளைப் புகாரளிக்கவும். பழைய (மற்றும் வெளித்தோற்றத்தில் நவீனமானது, ஆனால் இன்னும் முழுமையாக தரநிலைக்கு இணங்கவில்லை) உலாவிகளின் பயனர்கள் என்ன பார்ப்பார்கள் என்பதைப் பற்றி சிந்திக்க மறக்காதீர்கள் - எடுத்துக்காட்டாக, நீங்கள் jQuery Columnizer செருகுநிரலைப் பயன்படுத்தலாம். சிறிய மற்றும் பெரிய திரைகளின் தகவமைப்பு மற்றும் பார்வையாளர்களை மனதில் கொள்ளுங்கள்.
பல நெடுவரிசைகளில் ஒரு பக்கத்தில் உரையை எவ்வாறு ஒழுங்கமைப்பது? மேலும் இது தானாகவே செய்ய முடியுமா? நிச்சயமாக, உங்களில் பலர் இணைய மேம்பாட்டில் ஈடுபட்டுள்ளவர்கள் அல்லது அத்தகைய பணியை எதிர்கொண்டுள்ளனர் - மேலும் தந்திரமான பாணிகள் அல்லது கூடுதல் ஜாவாஸ்கிரிப்ட் லைப்ரரிகளின் பயன்பாடு தேவைப்படும் சிக்கலான தீர்வுகளை அடிக்கடி எதிர்கொள்கின்றனர் (எடுத்துக்காட்டாக, jQuery க்கான Columnizer செருகுநிரலைப் பார்க்கவும்).
பல நெடுவரிசை உள்ளடக்க தளவமைப்பு (பொது பல நெடுவரிசை பக்க தளவமைப்பு பணியுடன் குழப்பமடையக்கூடாது, இது ஒரு கட்டத்தில் தொகுதிகளை ஒழுங்கமைப்பதில் உள்ள சிக்கலுக்கு மிகவும் நெருக்கமானது) நீண்ட காலமாக இணைய தரநிலை உலகில் அதன் வழியை உருவாக்கி, இறுதியாக, வேட்பாளர் பரிந்துரையின் நிலையை அடைந்தது மட்டுமல்லாமல், அதனுடன் தொடர்புடைய சிஎஸ்எஸ் 3 வடிவில் நியாயமான ஆதரவையும் பெறுகிறது. உலாவிகளில்: முன்னொட்டுகள் (-moz- அல்லது -webkit-) மற்றும் எங்கோ உண்மையான (Opera 11 .1+) மற்றும் திட்டமிடப்பட்ட பதிப்புகள் (IE10+) மற்றும் உடனடியாக முன்னொட்டுகள் இல்லாமல்.
கருத்து
இன்டர்நெட் எக்ஸ்புளோரர் 10ஐப் பொறுத்தவரை, HTML/CSS/JSஐப் பயன்படுத்தி Windows 8 மெட்ரோ-பாணி பயன்பாடுகளை உருவாக்கும்போது CSS3 மல்டி-நெடுவரிசையைப் பயன்படுத்தலாம்.
இந்தக் கட்டுரையின் நோக்கங்களுக்காக, குறியீட்டைக் குழப்ப உலாவி முன்னொட்டுகளைப் பயன்படுத்த மாட்டேன், ஆனால் உண்மையான பயன்பாட்டில், Firefox, Safari மற்றும் Chrome ஆகியவற்றிற்கான முன்னொட்டு ஆதரவைச் சேர்க்க மறக்காதீர்கள்.
மேலும் இரண்டு முக்கியமான விவரங்களை உடனடியாகக் குறிப்பிடுகிறேன்.
முதலாவதாக, பெரும்பாலான சந்தர்ப்பங்களில், உரைக்கான பல நெடுவரிசை தளவமைப்பைப் பயன்படுத்துவது முற்போக்கான மேம்படுத்தல் பாதையில் தள உள்ளடக்கத்தின் காட்சியின் வளர்ச்சியாகக் கருதப்படலாம், அதற்குள் நவீன தளங்களின் பயனர்கள் அதிக நன்மைகளைப் பெறுவார்கள்:
இரண்டாவதாக, மீடியா வினவல்களின் திறன்களுடன் (மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பு யோசனைகள்,) பல நெடுவரிசை காட்சி நன்றாக வேலை செய்கிறது, எடுத்துக்காட்டாக, வெவ்வேறு திரை அளவுகளில், நீங்கள் உரையை வெவ்வேறு நெடுவரிசைகளாக வடிவமைக்கலாம்:
அறிமுகத்தில் கடைசியாக நான் கவனிக்க விரும்புவது, இதைப் பற்றி மேலும் பேசாமல், தொழில்நுட்ப விவரங்களுக்கு தெளிவான மனசாட்சியுடன் செல்ல வேண்டாம்: பல நெடுவரிசை உரை அமைப்பைப் பயன்படுத்தும் போது, அத்தகைய ஏற்பாடு ஒரு குறிப்பிட்ட வாசிப்பு வரிசையையும் (ஐரோப்பிய மொழிகளுக்கு இடமிருந்து வலமாக) குறிக்கிறது என்பதை நினைவில் கொள்ள வேண்டும். எனவே, பார்வையை ஒரு நெடுவரிசையிலிருந்து மற்றொரு நெடுவரிசைக்கு மாற்ற, முடிந்தவரை சில கூடுதல் செயல்களைச் செய்வது அவசியம், குறிப்பாக செங்குத்து சுருள்களுக்கு:
இந்த அர்த்தத்தில், நெடுவரிசைகளின் கிடைமட்ட தன்மை கிடைமட்ட ஸ்க்ரோலிங்குடன் சிறப்பாக இணைக்கப்பட்டுள்ளது (இது Win8 க்கான பல பயன்பாடுகளில் பயன்படுத்தப்படுகிறது - எடுத்துக்காட்டாக, இது USA Today பயன்பாட்டில் தெளிவாகக் காணப்படுகிறது):
பொதுவாக, பேச்சாளர்கள் சிறந்தவர்கள், ஆனால் பயனர்களின் வசதியைப் பற்றி மறந்துவிடாதீர்கள். இப்போது போராட வேண்டும்!
பேச்சாளர்கள்
எனவே, பல நெடுவரிசைகளில் வைக்க விரும்பும் உரை (உள்ளடக்கம்) எங்களிடம் உள்ளது. எங்கு தொடங்குவது?
அத்தகைய உறுப்பை பல நெடுவரிசை உறுப்புகளாக மாற்ற, CSS பாணிகள் மூலம் பின்வரும் பண்புகளில் ஒன்றை அமைக்க வேண்டும்: நெடுவரிசை-அகலம்அல்லது நெடுவரிசை எண்ணிக்கைதவிர வேறு ஒரு மதிப்புக்கு ஆட்டோ. உதாரணத்திற்கு,
உரையை இரண்டு நெடுவரிசைகளாகப் பிரிக்க, இதைச் செய்யுங்கள்:
கட்டுரை (நெடுவரிசை எண்ணிக்கை: 2; )
உலாவி மீதமுள்ளவற்றைச் செய்யும்:
மாற்று சொத்து - நெடுவரிசை-அகலம்- நெடுவரிசைகளின் உகந்த அகலத்தை அமைக்க உங்களை அனுமதிக்கிறது:
கட்டுரை (நெடுவரிசை அகலம்: 150px; )
அதே நேரத்தில், குறிப்பிட்ட நெடுவரிசையின் அகலத்தை சரிசெய்து, வெளிப்புற கொள்கலனை நிரப்புவதற்கு தேவையான நெடுவரிசைகளின் எண்ணிக்கையில் உள்ளடக்கத்தை உலாவியே உடைக்கிறது. முக்கியமான விஷயம் என்னவென்றால் உண்மையான அகலம் குறிப்பிடப்பட்டதிலிருந்து வேறுபடலாம்மேலே அல்லது கீழ்: மேலே உள்ள படத்தில், சாம்பல் பட்டை சரியாக 150px அகலம் கொண்டது - நீங்கள் பார்க்க முடியும் என, இது நெடுவரிசையின் உண்மையான அகலத்தை விட சிறியது.
இந்த நடத்தை விவரக்குறிப்பால் வரையறுக்கப்படுகிறது மற்றும் பதிலளிக்கக்கூடிய மார்க்அப்பை உருவாக்கும்போது (தானாகவே) அதிக நெகிழ்வுத்தன்மையை அனுமதிக்கிறது:
எடுத்துக்காட்டாக, உங்களிடம் 100px அகலமான கொள்கலன் இருந்தால், நீங்கள் நெடுவரிசைகளை 45px அகலத்திற்கு அமைத்தால், இரண்டு நெடுவரிசைகள் மட்டுமே பொருந்தும் என்று உலாவி கருதும், மேலும் முழு இடத்தையும் நிரப்ப, ஒவ்வொன்றின் அளவையும் 50px ஆக அதிகரிக்கும். (இது நெடுவரிசைகளுக்கு இடையிலான இடைவெளியையும் கணக்கில் எடுத்துக்கொள்கிறது, இது அடுத்த பகுதியில் விவாதிக்கப்படும்.)
ஒரு வகையில், இது சாளரத்தின் அளவைப் பொறுத்து மீடியா வினவல்களைப் பயன்படுத்தி வெவ்வேறு எண்ணிக்கையிலான நெடுவரிசைகளைக் குறிப்பிடுவதற்கும், நெடுவரிசை அகலங்களைத் தானாகக் கணக்கிடுவதற்கும் மாற்றாகக் காணலாம்:
@media (குறைந்த அகலம்:400px) (கட்டுரை (நெடுவரிசை எண்ணிக்கை: 2;) ) @media (குறைந்த அகலம்:600px) (கட்டுரை (நெடுவரிசை எண்ணிக்கை: 3; ) ...
நான் இரண்டாவது முறையாக மாற்று வழியைப் பற்றி பேசுகிறேன் - அதற்கான காரணம் இங்கே.
எண்ணிக்கை எதிராக அகலம்
மேலே உள்ள விளக்கத்திலிருந்து தெளிவாக இருக்க வேண்டும் என்பதால், விவரக்குறிப்பு நெடுவரிசைகளின் எண்ணிக்கை மற்றும் அகலத்தை அமைக்க இரண்டு வழிகளை வழங்குகிறது (அதன் மூலம், இது எல்லா நெடுவரிசைகளுக்கும் ஒரே மாதிரியாக இருக்கும்!):- நெடுவரிசை எண்ணிக்கைநீங்கள் உள்ளடக்கத்தை பிரிக்க விரும்பும் நெடுவரிசைகளின் எண்ணிக்கையைக் குறிப்பிட உங்களை அனுமதிக்கிறது, அதே நேரத்தில் நெடுவரிசைகளின் அகலம் உலாவியால் தீர்மானிக்கப்படுகிறது, கிடைக்கும் இடத்தை கணக்கில் எடுத்துக்கொள்கிறது.
- நெடுவரிசை-அகலம்பின்புறத்திலிருந்து வருகிறது: நெடுவரிசைகள் தோராயமாக என்னவாக இருக்க வேண்டும் என்பதைக் குறிக்கிறது, இருப்பினும், அவற்றின் எண்ணிக்கையின் கணக்கீட்டை உலாவியின் விருப்பத்திற்கு விட்டுவிடுகிறது.
நெடுவரிசைகள்: 12எம்; /* நெடுவரிசை அகலம்: 12em; நிரல் எண்ணிக்கை: தானியங்கு; */ நெடுவரிசைகள்: 2; /* நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை எண்ணிக்கை: 2; */நெடுவரிசைகள்: ஆட்டோ; /* நெடுவரிசை அகலம்: தானியங்கு; நிரல் எண்ணிக்கை: தானியங்கு; */ நெடுவரிசைகள்: ஆட்டோ 12எம்; /* நெடுவரிசை அகலம்: 12em; நிரல் எண்ணிக்கை: தானியங்கு; */நெடுவரிசைகள்: 2 ஆட்டோ; /* நெடுவரிசை அகலம்: தானியங்கு; நெடுவரிசை எண்ணிக்கை: 2; */
நெடுவரிசைகளின் எண்ணிக்கை மற்றும் உகந்த அகலம் இரண்டையும் குறிப்பிட்டால் என்ன நடக்கும்? விவரக்குறிப்பு படி, இந்த வழக்கில் நெடுவரிசை எண்ணிக்கைநெடுவரிசைகளின் அதிகபட்ச எண்ணிக்கையை வரையறுக்கிறது:
கட்டுரை (நெடுவரிசைகள்: 150px 3; /* நெடுவரிசை-அகலம்: 150px; நெடுவரிசை எண்ணிக்கை: 3; */ )
உண்மையில், CSS3 பற்றிய எனது சில கட்டுரைகள் உட்பட வலைத் தரநிலைகளின் பரிணாம வளர்ச்சியைப் பின்பற்றி (உதாரணமாகப் பார்க்கவும்), இணைய உருவாக்குநர்களுக்கு குறைவான உத்வேகத்துடன் திறக்கும் சாத்தியக்கூறுகளை நீங்கள் பார்ப்பீர்கள் என்று நம்புகிறேன். பதிலளிக்கக்கூடிய, நெகிழ்வான மற்றும் சக்திவாய்ந்த உள்ளடக்க மேலாண்மை கருவிகள் மேலும் மேலும் நெருக்கமாகி வருகின்றன. மேலும் சிக்கலான சிக்கல்களைத் தீர்ப்பது எளிதாகிறது.
ஊடாடும்
ieetestdrive.com இல் CSS3 மல்டி-நெடுவரிசையுடன் நீங்கள் விளையாடலாம்:
முயற்சி, பரிசோதனை. உலாவி டெவலப்பர்களுக்கு பிழைகளைப் புகாரளிக்கவும். பழைய (மற்றும் வெளித்தோற்றத்தில் நவீனமானது, ஆனால் இன்னும் முழுமையாக தரநிலைக்கு இணங்கவில்லை) உலாவிகளின் பயனர்கள் என்ன பார்ப்பார்கள் என்பதைப் பற்றி சிந்திக்க மறக்காதீர்கள் - எடுத்துக்காட்டாக, நீங்கள் jQuery Columnizer செருகுநிரலைப் பயன்படுத்தலாம். சிறிய மற்றும் பெரிய திரைகளின் தகவமைப்பு மற்றும் பார்வையாளர்களை மனதில் கொள்ளுங்கள்.