CSS එකේ ස්වයංක්රීය පළල සහිත ටයිල් වල ඉඩ ප්රමාණය
පේළියකට බ්ලොක් හතරක් ඇති ටයිල් එකක් අප සතුව ඇතැයි සිතමු:
.child {
width: 25%;
}
අපගේ බ්ලොක් වලට තිරස් සහ සිරස් අතට ප්රතිශත වලින් ඉඩ ප්රමාණය එකතු කරමු:
.child {
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
අප කල දේ මේ වන තුරු නිවැරදිව ක්රියා නොකරනු ඇත,
මන්ද බ්ලොක් සහ ඉඩ ප්රමාණයේ සම්පූර්ණ පළල
100% ට වඩා වැඩි වේ. නිවැරදිව ක්රියා කිරීම සඳහා
අපගේ ඉඩ ප්රමාණය සඳහා ඉඩක් ලබා දීමට
සෑම බ්ලොකයකින්ම කොටසක් කපා හැරිය යුතුය.
අපි මෙම කොටස් ගණනය කරමු.
අපගේ නඩුවේදී, බ්ලොක් හතරක් ඇති අතර, ඒවා අතර ඉඩ ප්රමාණ තුනක් ඇත - ප්රතිශතයෙන් එකහමාරක්. කපා හැරිය යුතු කොටස ගණනය කිරීමට, සම්පූර්ණ ඉඩ ප්රමාණය බ්ලොක් ගණනින් බෙදිය යුතුය:
1.5% * 3 / 4 = 1.125එවිට සෑම බ්ලොකයකම පළල සමාන වේ:
25% - 1.5% * 3 / 4 = 23.875%පහත කේතය ලැබේ:
.child {
width: 23.875%;
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
මෙම ඉඩ ප්රමාණය අප විසින්ම ගණනය නොකර,
ගණනය කිරීමේ වැඩ
calc ශ්රිතයට පැවරිය හැකිය:
.child {
width: calc(25% - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
බ්ලොකයේ පළල ද ගණනය කරන්න
calc ශ්රිතයට ඉඩ දෙමු:
.child {
width: calc(100% / 4 - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
ටයිල් එකේ පේළියකට බ්ලොක් තුනක් වන පරිදි,
ඒවා අතර දුර
3% වන පරිදි බ්ලොක් වලට ප්රතිශත පළලක් සකසන්න.
ටයිල් එකේ පේළියකට බ්ලොක් හයක් වන පරිදි,
ඒවා අතර දුර
0.5% වන පරිදි බ්ලොක් වලට ප්රතිශත පළලක් සකසන්න.
ටයිල් එකේ පේළියකට බ්ලොක් හතරක් වන පරිදි,
බ්ලොක් අතර දුර
30px වන පරිදි බ්ලොක් වලට ප්රතිශත පළලක් සකසන්න.
ටයිල් එකේ පේළියකට බ්ලොක් පහක් වන පරිදි,
බ්ලොක් අතර දුර
50px වන පරිදි බ්ලොක් වලට ප්රතිශත පළලක් සකසන්න.
