වසර ගණනාවක් පුරා CSS floats ඉතාමත්ම සිත්ගන්නා නමුත් අවශ්ය වුවද, වෙබ් අඩවි සැකසීමට නිර්මාණය කර ඇත. ඔබේ නිර්මාණය විවිධාකාරයේ තීරු සඳහා කැඳවූයේ නම්, ඔබ පාවී යයි . මෙම ක්රමයේ ඇති ගැටළුව වන්නේ, වෙබ් නිර්මාණකරුවන් / සංවර්ධනකරුවන් විසින් සංකීර්ණ අඩවි සැලැස්ම නිර්මාණය කර ඇති බවට වූ විශ්මයජනක දක්ෂතාවයන් තිබියදීත්, CSS ප්ලේටෝ කිසි විටෙකත් භාවිතා කිරීමට මෙයින් අදහස් නොකෙරේ.
Floats සහ CSS ස්ථානගත කිරීම වසර ගණනාවක් සඳහා වෙබ් නිර්මාණකරණයක ස්ථානයක් තිබිය යුතු අතර, CSS Grid සහ Flexbox වැනි නවීන සැකැස්මක් වෙබ් අඩවි නිර්මාණකරුවන්ට ඔවුන්ගේ අඩවි සැලැස්ම නිර්මාණය කිරීමට නව මාර්ග ලබා දෙයි. බොහෝ විභවතාවන් පෙන්වන තවත් නව රූකඩ උපක්රම CSS බහු තීරු.
CSS තීරු රැඳී ඇත්තේ වසර කිහිපයක් පමණි. නමුත් පැරණි වෙබ් බ්රව්සරවල (බොහෝ විට පැරණි අනුවාදවල Internet Explorer හි) පැරණි අනුවාදවල සහයෝගය නොමැති නිසා ඒවායේ නිෂ්පාදන කටයුතු සඳහා භාවිතා කරන බොහෝ වෙබ් වෘත්තිකයින් මෙම වෙබ් අඩවි භාවිතා කර ඇත.
IE වයස්වල පැරණි අනුවාදයන් සඳහා සහයෝගය ඇතිව, සමහර වෙබ් නිර්මාණකරුවන් දැන් නව CSS පිරිසැලසුම් විකල්ප සමඟ අත්හදා බලමින් සිටින අතර, CSS තීරු ඇතුළත් කර ඇති අතර, ඔවුන් විසින් මෙම නව ප්රවිෂ්ටයන් සමඟ වැඩිපුර පාලනයක් ඇති බව සොයා ගැනීමත් සමඟම ඒවා floating සමග වඩා හොඳින් පාලනය කර ඇත.
CSS තීරුවෙහි මූලික කරුණු
එහි නම සඳහන් කරන පරිදි, CSS බහු තීරු (CSS3 බහු තීරු පිරිසැලසුම ලෙසද හැඳින්වේ) මඟින් ඔබට තීරු සංඛ්යාවක සංඛ්යාවකට බෙදී ඇත. ඔබ භාවිතා කරන වඩාත් මූලික CSS ගුණාංග වනුයේ:
- තීරු-ගණන
- තීරු-පරතරය
තීරු-ගණන සඳහා, ඔබ අවශ්ය තීරු සංඛ්යාව සඳහන් කරන්න. තීරු පරතරය එම තීරු අතර පරතරයයි. බ්රව්සරය මෙම අගයයන් ගෙන එමින් ඔබ විසින් තීරු ගණනට සමාන අන්තර්ගතයන් බෙදා වෙන් කරනු ලැබේ.
ප්රායෝගිකව සීඑස්එස්හි බහු තීරුවෙහි පොදු නිදසුනක් වන්නේ, පුවත්පත් ලිපියක් තුල ඔබ දැක ඇති දේට සමාන තීරු ලිපි ගණනකට බෙදීමටය. පහත දැක්වෙන HTML සලකුණු ඔබ සතුව තිබේ නම් (උදාහරණ වශයෙන්, මම සලකන්නේ එක් ඡේදයක ආරම්භය පමණක් වන අතර, ප්රායෝගිකව මෙම ලෝචනයෙහි අන්තර්ගතයන් ගණන කිහිපයක් විය හැකිය):
ඔබගේ ලිපියේ ශීර්ෂය
මෙතැනින් පිටින් ඡේද කිහිපයක් සිතන්න ...
ඔබ පසුව CSS ශෛලිය ලියුවේ නම්:
.content {-moz-column-count: 3; -webkit-column-count: 3; තීරු-ගණන්: 3; -moz-තීරුව-පරතරය: 30px; -webkit-තීරුව-පරතරය: 30px; තීරු-පරතරය: 30px; }}මෙම CSS නීතිය මගින් "අන්තර්ගතය" බෙදීම් අතර සමාන තීරු 3 කට බෙදනු ඇත. ඔබට තීරු දෙකක් වෙනුවට තීරු දෙකක් අවශ්ය වුවහොත්, ඔබ එම අගය වෙනස් කරනු ඇත, සහ බ්රවුසරයේ එම තීරු වල නව පළල ගණනය කරනු ඇත. අපි මුලින්ම වෙළෙන්දාගේ ප්රත්යක්ෂ ගුණාංගයන් භාවිතා කරන බව සලකන්න. ඉන් අනතුරුව අනේවාසික ප්රකාශයන් අනුගමනය කරන්න.
මේ ආකාරයෙන් පහසු වන පරිදි වෙබ් අඩවි භාවිතා කිරීම සඳහා මෙය භාවිතා කිරීම ප්රශ්නයට භාජනය වේ. ඔව්, ඔබට බහු තීරුකට අන්තර්ගතය පොදුවේ බෙදා ගත හැකි නමුත්, මෙම වෙබ් පිටුව සඳහා හොඳම කියවීමේ අත්දැකීමක් විය නොහැකිය, විශේෂයෙන් මෙම තීරු වල තිරය "තිරය" පහළට වැටේ.
එවිට සම්පූර්ණ අන්තර්ගතය කියවීමට පාඨකයන්ට ඉහළට පහළ බැසීමට සිදුවනු ඇත. තවමත් CSS Columns හි විදුහල්පති මෙතරම් පහසු වන අතර, එය සමහරක් ඡේදවල අන්තර්ගතය බෙදීමට වඩා බොහෝ සෙයින් වැඩි කිරීමට භාවිතා කළ හැකිය - එය සැබවින්ම, පිරිසැලසුම සඳහා භාවිතා කළ හැකිය.
CSS තීරුව සමඟ පිරිසැලසුම
අන්තර්ගත තීරු 3 ක් අඩංගු අන්තර්ගතයක් සහිත වෙබ් අඩවියක් ඇති බව කියන්න. මෙය ඉතා සාමාන්ය වෙබ් අඩවි සැලැස්මකි. එම තීරු තුනම සපුරා ගැනීම සඳහා, ඔබ සාමාන්යයෙන් ඇති වන බෙදීම් float. CSS බහු තීරු සහිතව, එය වඩාත් පහසු වේ.
පහත දැක්වෙනුයේ HTML:
නවතම පුවත්
අන්තර්ගතය මෙතැනින් යන්න ...
අපේ බ්ලොග් අඩවිය
අන්තර්ගතය මෙතැනින් යන්න ...
ඉදිරියට එන සිදුවීම්
අන්තර්ගතය මෙතැනින් යන්න ... < p>
මෙම බහු තීරු සෑදීම සඳහා CSS මුලින්ම ඔබ දුටු දේ සමඟ ආරම්භ වේ:
.content {-moz-column-count: 3; -webkit-column-count: 3; තීරු-ගණන්: 3; -moz-තීරුව-පරතරය: 30px; -webkit-තීරුව-පරතරය: 30px; තීරු-පරතරය: 30px; }}දැන් මෙහි ඇති අභියෝගය වන්නේ බ්රවුසරයට මෙම අන්තර්ගතය සමානව බෙදා වෙන්කිරීමට අවශ්ය බැවින්, මෙම බෙදීම්වල අන්තර්ගතයේ දිග වෙනස් වුවහොත්, බ්රවුසරය තනි අංශයක අන්තර්ගතය භේද වුවහොත් එය එක් එක් තීරුවට එකතු කිරීම සහ ඉන්පසුව අඛණ්ඩව තව දුරටත් (ඔබට මෙම කේතය භාවිතා කර අත්හදා බැලීමක් සිදුකිරීමට සහ එක් එක් කොට්ඨාශයේ අන්තර්ගත විවිධ දිශාවන් එකතු කළ හැකිය)!
ඔබට අවශ්ය දේ නොවේ. ඔබට මෙම එක් එක් අංශයන් එකිනෙකට වෙනස් තීරුවක් නිර්මාණය කිරීමට අවශ්ය වන අතර, කොතරම් විශාල හෝ කුඩා අංශයක අන්තර්ගතය කුමක් වුවත්, එය කිසිසේත් බෙදී නැත. මෙම CSS එක් අතිරේක රේඛාවක් එකතු කිරීමෙන් ඔබට මෙය ලබා ගත හැක:
. අන්තර්ගතය div {display: inline-block; }}බ්රවුසරය මෙම තීරු ගණනාවකට බෙදී ඇති බැවින් එය "අන්තර්ගතය" ඇතුළත නොතිබිය හැකිය. මෙතැනට අපි කිසිවක් නොකෙරුණු දිගුවක් ලබා නොදෙන බැවින්, මෙම තීරු ස්වයංක්රීයව වෙනස්කම් කරන ලද බ්රවුසරය වෙනස් කර, ප්රතිචාරාත්මක වෙබ් අඩවි සඳහා සුදුසු යෙදුමක් බවට පත් කිරීම . එම "Inline-block" විලාසය තැනූ විට, ඔබගේ එක් එක් කොට්ඨාශයේ එක් එක් වෙන් වෙනම තීරු තීරුවක් වනු ඇත.
තීරු-පළල භාවිතා කිරීම
ඔබ භාවිතා කළ හැකි "තීරු-ගණන්" හැරෙන්නට වෙනත් ගුණයක් පවතියි. ඔබගේ පිරිසැලසුම් අවශ්යතා මත පදනම්ව, එය ඔබේ වෙබ් අඩවිය සඳහා වඩාත් හොඳ තේරීමක් විය හැකිය. මෙය "තීරු-පළල". මීට පෙර පෙන්වා ඇති එකම HTML සලකුණු භාවිතයෙන්, අපට CSS සමඟ මෙය සිදු කළ හැකිය:
.content {-moz-column-width: 500px; -webkit-තීරුව-පළල: 500px; තීරු-පළල: 500px; -moz-තීරුව-පරතරය: 30px; -webkit-තීරුව-පරතරය: 30px; තීරු-පරතරය: 30px; }. අන්තර්ගත අන්තර්ගත div {display: inline-block; }}මෙය ක්රියාත්මක වන ආකාරය වන්නේ බ්රවුසරයේ එම තීරුවෙහි උපරිම අගය ලෙස "තීරු-පළල" භාවිතා කරයි. එබැවින් බ්රවුසර කවුළුවෙහි පළල 500 ට වඩා අඩු නම්, මෙම අංශ තුනට එක් තීරුවක් තුළ දර්ශණය වනු ඇත. මෙය ජංගම / කුඩා තිර පිරිසැලසුම් සඳහා භාවිතා වන සාමාන්ය පිරිසැලසුමකි.
බ්රවුසරයේ පළල තීරු 2 ක් සමග ගැලපෙන පරිදි ප්රමාණවත් තරම් විශාල වීම නිසා බ්රවුසරය ස්වයංක්රීයව තනි තීරුව සැකැස්මේ සිට තීරු දෙකක් දක්වා ගමන් කරයි. තිරයේ පළල වැඩිවීම හා අවසානයේදී, ඔබට තීරු තුනක් නිර්මාණය කරගත හැකි අතර, අපගේ එක් එක් තීරු තුනේම ඒවායේ තීරු ආකාරයෙන් දිස් වේ. නැවතත්, සමහර ප්රතිචාරාත්මක, බහු-උපාංග හිතකාමී පිරිසැලසුම් ලබා ගැනීමට මෙය විශිෂ්ට ක්රමයක් වන අතර, ඔබට අලුතෙන් සැකසුම් වෙනස් කිරීම සඳහා මාධ්ය විමසුම් භාවිතා කිරීමට අවශ්ය නැත!
අනෙකුත් තීරු සෙවුම්
මෙහි ආලේපිත දේ වලට අමතරව, තීරු අතර නීති රීති නිර්මාණය කිරීමට ඉඩ සලසන වර්ණ, විලාසය සහ පළල අගයන් ඇතුළුව "තීරු-නීතිය" සඳහා ගුණාංග ඇත. ඔබ ඔබේ තීරු වෙන් කිරීම සඳහා යම් රේඛා තිබිය යුතු වුවහොත් ඒවා දේශසීමා වෙනුවට භාවිතා කරනු ඇත.
පරීක්ෂණ සඳහා ගතවන කාලය
වර්තමානයේ CSS බහු තීරු පිරිසැලසුම ඉතා හොඳින් සහාය වේ. උපසර්ගයන් සහිතව, අන්තර්ජාල පරිශීලකයින්ගෙන් 94% කට වඩා වැඩි ප්රමාණයක් මෙම විලාසයන් දැකීමට හැකි වන අතර, සහාය නොදක්වන කණ්ඩායම ඇත්ත වශයෙන්ම අන්තර්ජාලය භාවිතා කරන්නෙකුගේ වැඩිහිටි අනුවාදයන් විය හැකිය.
දැන් මෙම සහයෝගය ඇතිව, CSS තීරු අත්හදා බැලීම ආරම්භ කිරීමට සහ නිෂ්පාදන නිපදවා ඇති වෙබ් අඩවිවල මෙම විලාසිතා යෙදවීම ආරම්භ කිරීමට කිසිදු හේතුවක් නැත. ඔබේ වෙබ් අඩවියේ ඇති සැලැස්මේ අවශ්යතා සඳහා ඔබේ වැඩ කටයුතු සඳහා වඩාත් සුදුසු වන්නේ කුමක්දැයි බැලීමට ඔබට මෙම අත්හදා බැලීමේ HTML සහ CSS භාවිතා කර ඔබගේ අත්හදා බැලීම් ආරම්භ කළ හැකිය.