CSS Float අවබෝධ කර ගැනීම

වෙබ් පිටු සැකසීම් නිර්මාණය කිරීම සඳහා CSS float දේපල භාවිතා කිරීම

CSS දේපළ යනු පිරිසැලසුම සඳහා ඉතා වැදගත් දේ වේ. එය ඔබට ප්රදර්ශනය කිරීමට අවශ්ය පරිදි ඔබේ වෙබ් පිටු නිර්මාණයන් ස්ථානගත කිරීමට ඉඩ දෙයි, නමුත් එය භාවිතා කිරීම සඳහා එය ඔබ ක්රියා කරන ආකාරය අවබෝධ කර ගත යුතුය.

ශෛලියක් තුළ, CSS float දේපල මේ ආකාරයෙන් පෙනේ:

හරි; float: හරි; }}

මෙය "හරි" පංතියේ ඇති සියල්ලම දකුණු පස පාවෙන බව බව බ්රව්සරයට කියනු ලැබේ.

ඔබ මෙය මෙසේ අනුමත කරනු ඇත:

class = "හරි" />

CSS ෆ්ලොට් දේපළ සමඟ ඔබට දිය හැකි කුමක් ද?

ඔබට වෙබ් පිටුවක සෑම අංගයක්ම පාවී යන්නේ නැත. ඔබට බ්ලොක් මට්ටමේ මූලයන් පමණක් float කළ හැකිය. මෙම පිටුවෙහි අවකාශය අවහිර වන මූලද්රව්යයන්, අනුරූ (), ඡේද (), බෙදීම් () සහ ලැයිස්තු () වැනි.

පාඨයට බලපාන වෙනත් මූලද්රව්යයන්, නමුත් පිටුවෙහි ඇති කොටුවක් නිර්මාණය නොකරනු ලබන්නේ පේළි මූලද්රව්ය සහ ඒවා පාවී නො යා යුතුය. මේවායේ දිග (), රේඛා බිඳීම් (), දැඩි අවධාරණය () හෝ ඇලකුරු () වේ.

ඔවුන් පාවී යන්නේ කොහේද?

ඔබට දකුණු පස හෝ වමෙහි මූලද්රව්ය පාවීමට හැකිය. පාවෙන මූලද්රව්යය අනුගමනය කරන ඕනෑම මූලද්රව්ය අනෙක් පැත්තෙහි පාවෙන මූලද්රව්යය වටා භ්රමණය වේ.

නිදසුනක් ලෙස, මම වම් පසින් පිංතූරයක් float, එය අනුගමනය කරන ඕනෑම පෙළක් හෝ වෙනත් මූලද්රව්ය ද එය දකුණට ප්රවාහනය කරනු ඇත. මම දකුණට රූපයක් ගලා බසිනවා නම්, එය අනුගමනය කරන ඕනෑම පෙළක් හෝ වෙනත් මූලද්රව්ය වම් පස වටා ගමන් කරයි. ඕනෑම float style එකක් නොමැතිව පෙළපලක ඇති රූපයක් රූපය දර්ශණය කිරීමට බ්රවුසරය සකසා ඇත.

සාමාන්යයෙන් මෙය රූපයේ පහළ කොටසෙහි දැක්වෙන පාඨයේ පළමු පේළිය සමඟ ඇත.

ඔවුන් කොපමණ ඈතකුද?

ඉපිලෙන ලද මූලද්රව්යය, එය හැකි පරිදි කන්ටේනර් මූලද්රව්යයේ වම් හෝ දකුණට ඈතට ගමන් කරයි. මෙමඟින් ඔබේ කේතය ලියන්නේ කෙසේද යන්න මත විවිධ තත්ත්වයන් ඇති වේ.

මෙම නිදසුන් සඳහා, වමේ සිට කුඩා DIV මූලද්රව්යයක් පාවෙන අතර,

• පාවෙන ලද මූලද්රව්යයේ පූර්ව අර්ථනිරූපිත පළලක් නොමැති නම්, එය අවශ්ය වන පරිදි අවශ්ය වන පරිදි තිරස් අතට ගත හැකි වන අතර, එය පාවෙන වේ. සටහන: සමහර බ්රවුසරයේ පළල නිර්වචනය නොකෙරෙන විට ඒවායේ මූලද්රව්යවලට ස්ථානගත කිරීමට උත්සාහ දරයි. සාමාන්යයෙන් නොකැඩූ මූලද්රව්යය කුඩා ඉඩ ප්රමාණයක් පමණක් ලබා දෙයි. එබැවින් ඔබ සැමවිටම පාවෙන මූලද්රව්ය මත පළලක් අර්ථ දැක්විය යුතුය.
• කන්ටේනර් මූලද්රව්යය HTML මූලද්රව්යය නම්, floating DIV පිටුවෙහි වම් පරාසය මත වාඩි වනු ඇත.
• කන්ටේනර් මූලද්රව්යය වෙනත් දෙයක් මගින් අන්තර්ගත වුවහොත්, ප්ලාස්ටික් DIV භාජනයෙහි වම් පරාසය මත වාඩි වී ඇත.
• ඔබ කූඩුව පාවී යා හැකි මූලද්රව්ය, හා එය පුදුම ස්ථානයක් දී අවසානයේ පාවෙන විය හැක. නිදසුනක් ලෙස, මෙම float යනු නිවැරදිව පාවෙන DIV තුල වම් පාමුලුම් DIV වේ.
• ප් රවාහනය කරන ලද මූලද්රව්ය අතර බහාලුම් කාමරයක් තිබේ නම් එකිනෙකා අසල වාඩි වනු ඇත. උදාහරණයක් ලෙස, මෙම කන්ටේනරය සතුව ඩීසම් ඒකක 100 ක් පමණ පුළුල් වන අතර එය විශාල පරිමාණ කන්ටේනර් 400 ක් තුළ නිදැල්ලේ.

ඡායාරූප ගැලරිය සැකසීම සඳහා ඔබට ප්ලේට් භාවිතා කළ හැකිය. එක් එක් සිඟිති රූපය (එය සෑම විටම එකම ප්රමාණයට වඩා හොඳයි) එය ඩිජිටල් ඩිවයිනමන්ට් සහ ඩීඅයිඑන් මූලද්රව්ය අතර පාවෙන ය.

බ්රවුසර කවුළුව කොතරම් පුළුල්ව පැවතුණත්, කුඩා රූපයන් ඒකාකාරව දැක්වෙනු ඇත.

පාවෙන ලුහුබඳින්න

ඔබ පාවී යෑම සඳහා මූලද්රව්යයක් ලබා ගන්නේ කෙසේදැයි තීරණය කළ පසු, float ඉවත් කිරීම කෙසේ ද යන්න වැදගත් වේ. CSS පැහැදිලි දේපල සමඟ float ඔබ සක්රිය කරන්න. වම් පැත්ත, පැහැති පාවෙන හෝ දෙකම ඉවත් කළ හැකිය:

පැහැදිලි වමට;
පැහැදිලි ය;
පැහැදිලි ය:

ඔබ පැහැදිලි දේපලක් සැකසූ ඕනෑම අංගයක් එම දිශාව පාවෙන මූලද්රව්යයකට පහළින් දිස්වේ. නිදසුනක් ලෙස, මෙම උදාහරණයෙහි පෙළෙහි මුල් ඡේද දෙක නිෂ්කාශනය නොකෙරේ, නමුත් තෙවන වේ.

වෙනස් පිරිසැලසුම් ආචරණ ලබා ගැනීමට ඔබේ ලේඛනවල විවිධ අංගවල පැහැදිලි වටිනාකමක් සහිතව සෙල්ලම් කරන්න.

වඩාත්ම සිත් ඇදගන්නා ලද පුවරු සැකැස්ම එක් පෙළක් පිටු පෙළ හෝ දකුණු පසින් රූපයේ රූප මාලාවක් වේ. මෙම පින්තූරය අතීතය අනුචලනය කිරීමට ප්රමාණවත් නොවුවද, ඔබට පෙර රූපය වෙතට වඩා තීරුව තුල ඒවා දිස්වන බවට සියලු පින්තූරවල පැහැදිලි කළ හැකිය.

HTML (මෙම ඡේදය නැවත නැවත):

ඩුයිස් ඩ්රොයිස් ඩේලර් ඩේවිස් ටයිම්ස් ඩයිනර්ස් ටුඩේටස් ඩී. කපිතාන් නොපෙනෙන, දුෂ්කර හා මැඩම් ඇක්වාය.

CSS (වම් පසට පාවෙන ලෙසට):

img.float {float: left;
පැහැදිලි වමට;
ආන්තික: 5px;
}}

දකුණට:

img.float {float: right;
පැහැදිලි ය;
ආන්තික: 5px;
}}

පිරිසැලසුම සඳහා Floats භාවිතා කිරීම

Float දේපල ක්රියා කරන ආකාරය තේරුම්ගත් පසු, ඔබේ වෙබ් පිටු ඉවත් කිරීමට එය භාවිතා කළ හැකිය. Floating web page නිර්මාණය කිරීම සඳහා මම ගන්නා පියවර පහත දැක්වේ:

• පිරිසැලසුම නිර්මාණය කරන්න (කඩදාසි හෝ චිත්ර ශිල්පී හෝ මගේ හිසෙහි).
• පිටු බෙදීම් යනු කුමක්ද යන්න තීරණය කරන්න.
• විවිධ බහාලුම්වල සහ ඒවායේ මූලද්රව්යයන්ගේ පළල නිර්ණය කිරීම.
• හැමදේම පාවෙනවා. බාහිරතම කන්ටේනර් මූලද්රව්යය වම් පසට පාවෙන අතර බ්රවුසර් දර්ශන වරාය සම්බන්ධව එය කොහෙද දන්නේදැයි මම දනිමි.

ඔබේ ආකෘතියේ කොටස්වල පළල (ප්රතිශතය හොඳයි) ඔබ දැන සිටින තාක් දුරට, එම පිටුවෙහි අයත් ඒවා ස්ථානගත කිරීම සඳහා float දේපල භාවිතා කළ හැකිය. හොඳ දෙයක් නම්, කොටුව ආකෘතිය අන්තර්ජාලය හෝ ෆයර්ෆොක්ස් සඳහා වෙන වෙනම ඔබ ගැන කරදර නොවිය යුතුය.