വെബ് പേജ് ലേഔട്ടുകൾ രൂപകൽപ്പന ചെയ്യുന്നതിന് CSS float property ഉപയോഗിക്കുന്നു
ലേഔട്ടിനായി വളരെ പ്രധാനപ്പെട്ട ഒരു വസ്തുവാണ് CSS വസ്തു. നിങ്ങളുടെ വെബ് പേജ് ഡിസൈൻ ഡിസ്പ്ലേകൾ കൃത്യമായി നിർവചിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു, പക്ഷെ അത് ഉപയോഗിക്കുന്നതിന് നിങ്ങൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസിലാക്കുക.
ഒരു ശൈലി ഷീറ്റിൽ, CSS ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഇതുപോലെ കാണപ്പെടുന്നു:
. വലത് {ഫ്ലോട്ട്: വലത്; }
"വലതുപക്ഷത്തിന്റെ" ക്ലാസ് എല്ലാം വലതുവശത്തേക്ക് ഉയർത്തണം എന്ന് ബ്രൌസറിനോട് പറയുന്നു.
നിങ്ങൾ ഇതുപോലൊന്ന് നിയമിച്ചുകൊടുക്കും:
class = "right" />
നിങ്ങൾ CSS ഫ്ലോട്ട് പ്രോപ്പർട്ടിയിൽ എന്തെല്ലാം പറയാനാകും?
ഒരു വെബ് പേജിലെ എല്ലാ ഘടകങ്ങളും നിങ്ങൾക്ക് ഫ്ലോട്ട് ചെയ്യാൻ കഴിയില്ല. ബ്ലോക്ക്-ലെവൽ ഘടകങ്ങൾ മാത്രമേ നിങ്ങൾക്ക് ഫ്ലോട്ട് ചെയ്യാൻ കഴിയൂ. ഇമേജുകൾ (), ഖണ്ഡികകൾ (), ഡിവിഷനുകൾ (), ലിസ്റ്റുകൾ () എന്നിവ പോലെയുള്ള ഒരു സ്പേസ് ബ്ലോക്ക് എടുക്കുന്ന ഘടകങ്ങൾ ഇവയാണ്.
വാചകത്തെ ബാധിക്കുന്ന മറ്റ് ഘടകങ്ങൾ, എന്നാൽ പേജിൽ ഒരു ബോക്സ് സൃഷ്ടിക്കാൻ ഇൻലൈൻ ഘടകങ്ങൾ എന്ന് വിളിക്കപ്പെടുന്നു, അവ ആവിഷ്കരിക്കാൻ കഴിയില്ല. സ്പാൻ (), ലൈൻ ബ്രേക്കുകൾ (), ശക്തമായ ഊന്നൽ (), അല്ലെങ്കിൽ ഇറ്റാലിക്സ് () പോലുള്ള ഘടകങ്ങൾ ഇവയാണ്.
എവിടെയാണ് അവർ ഫ്ലോട്ട് ചെയ്യുന്നത്?
നിങ്ങൾ വലത് ഭാഗത്തേക്കോ ഇടത്തേക്കോ ഘടകങ്ങൾ ഫ്ലോട്ട് ചെയ്യാം. Floated മൂലകത്തെ പിന്തുടരുന്ന ഏത് ഘടകവും മറുവിലയിൽ ഉളവാകുന്ന ഒബ്ജക്റ്റിനെ ആശ്രയിച്ചിരിക്കുന്നു.
ഉദാഹരണത്തിന്, ഞാൻ ഒരു ചിത്രം ഇടതുവശത്തേക്ക് ഫ്ലോട്ട് ചെയ്യുകയാണെങ്കിൽ, അതിനെ പിന്തുടരുന്ന ഏത് വാചകമോ മറ്റ് ഘടകങ്ങളോ വലതുഭാഗത്തേക്ക് ഒഴുകും. ഞാൻ ഒരു ഇമേജ് വലതുവശത്തേക്ക് ഫ്ലോട്ട് ചെയ്യുകയാണെങ്കിൽ, അതിനെ പിന്തുടരുന്ന ഏത് വാചകമോ മറ്റ് ഘടകങ്ങളോ ഇടത് ഭാഗത്തേക്ക് ഒഴുകും. ബ്രൌസറിനെ ഇമേജുകൾ പ്രദർശിപ്പിക്കുന്നതിന് സജ്ജമാക്കിയിട്ടുണ്ടെങ്കിലും അത് പ്രയോഗിക്കുന്ന ഫ്ലോട്ട് ശൈലി ഉപയോഗിക്കാതെ വാചകത്തിന്റെ ബ്ലോക്കിൽ സ്ഥാപിച്ചിരിക്കുന്ന ചിത്രം പ്രദർശിപ്പിക്കും.
ചിത്രത്തിന്റെ താഴെ ഭാഗത്ത് കാണിക്കുന്ന താഴെ പറയുന്ന ടെക്സ്റ്റിന്റെ ആദ്യ വരിയാണിത്.
അവർ എത്രത്തോളം തളർന്നുപോകും?
ഉളവാക്കിയ ഒരു ഘടകം അത് സാധ്യമായതിനേക്കാളുപരി, കണ്ടെയ്നർ ഘടകത്തിന്റെ ഇടത്തേക്കോ വലത്തേക്കോ നീങ്ങും. നിങ്ങളുടെ കോഡ് എങ്ങനെയാണ് എഴുതിയതെന്നതിനെ ആശ്രയിച്ച് വ്യത്യസ്ത സാഹചര്യങ്ങളിൽ ഇത് ഫലപ്രദമാകുന്നു.
ഈ ഉദാഹരണങ്ങൾക്കായി ഞാൻ ഒരു ചെറിയ DIV ഘടകത്തെ ഇടതുവശത്തേക്ക് ഉയർത്തുന്നു:
- ഉളവാക്കിയ മൂലകത്തിന് പ്രീ-നിർവ്വചിച്ച വീതി ഇല്ലെങ്കിൽ, അത് ആവശ്യമുള്ളത്രയും തിരശ്ചീനമായ ഒരിടത്തും ഫ്ലോട്ട് പരിഗണിക്കാതെ തന്നെ എടുക്കും. ശ്രദ്ധിക്കുക: വീതി നിർവചിക്കാതെ നിർവചിച്ചിരിക്കുന്ന എലമെൻറുകളടങ്ങിയ മൂലകങ്ങൾ ചില ബ്രൌസറുകൾ സ്ഥാപിക്കാൻ ശ്രമിക്കുന്നു-സാധാരണയായി നോൺ-ഫ്ളോട്ടുചെയ്ത എലമെന്റ് ഒരു ചെറിയ സ്ഥലം മാത്രമേ നൽകുന്നുള്ളൂ. അതിനാൽ നിങ്ങൾ എലവേറ്റഡ് മൂലകങ്ങളിലുള്ള ഒരു വീതിയെ എല്ലായ്പ്പോഴും നിർവചിക്കേണ്ടതുണ്ട് .
- കണ്ടെയ്നർ ഘടകം HTML ഘടകം ആണെങ്കിൽ, floated DIV പേജിന്റെ ഇടതുഭാഗത്ത് ഇരിക്കും.
- കണ്ടെയ്നർ ഘടകം മറ്റെന്തെങ്കിലും അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ചിതറിക്കിടക്കുന്ന ഡിവിഐ കണ്ടെയ്നറിന്റെ ഇടതുഭാഗത്ത് ഇരിക്കും.
- നിങ്ങൾക്ക് ഫ്ലോട്ട് ചെയ്ത മൂലകങ്ങൾ കൂടുതലാണെങ്കിൽ, അത് ആശ്ചര്യകരമായ ഒരു സ്ഥലത്ത് അവസാനിക്കുന്ന ഫ്ലോട്ടിന് ഇടയാക്കും. ഉദാഹരണത്തിന്, ഈ ഫ്ലോട്ട് ശരിയായ ഫ്ലോട്ട് ഡിവിഐയിലുള്ള ഒരു ഇടതു ഫ്ളേറ്റഡ് ഡിഐവിയാണ്.
- കണ്ടെയ്നറിൽ മുറി ഉണ്ടെങ്കിൽ ഫ്ളോട്ടുചെയ്ത മൂലകങ്ങൾ പരസ്പരം ചേർന്നിരിക്കും. ഉദാഹരണത്തിന്, ഈ കണ്ടെയ്നറിൽ 400px വൈഡ് കണ്ടെയ്നറിൽ മൂന്ന് 100px വീതിയുള്ള DIV ഘടകങ്ങൾ ഉണ്ട്.
ഒരു ഫോട്ടോ ഗ്യാലറി ലേഔട്ട് സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഫ്ലോട്ടുകൾ ഉപയോഗിക്കാനും കഴിയും. ക്യാപ്ഷനിലെ DIV ഘടകങ്ങളിൽ അടിക്കുറിപ്പിനൊപ്പം DIV ലെ ഓരോ ലഘുചിത്രവും (അവ ഒരേ വലിപ്പമുള്ളപ്പോൾ പ്രവർത്തിക്കുന്നു).
ബ്രൌസർ വിൻഡോ എത്ര വലുതാണെന്നോ, ലഘുചിത്രങ്ങൾ ഏകീകൃതമായി ക്രമീകരിക്കപ്പെടും.
ഫ്ലോട്ട് ഓഫാക്കുക
ഫ്ലോട്ട് ചെയ്യുന്നതിനുള്ള ഒരു ഘടകം എങ്ങനെ നിങ്ങൾക്ക് അറിയാമെന്ന് ഒരിക്കൽ, ഫ്ലോട്ട് എങ്ങനെ ഓഫ് ചെയ്യാമെന്ന് അറിയേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങൾ CSS വ്യക്തമായ വസ്തുവിലൂടെ ഫ്ലോട്ട് ഓഫാക്കുക. നിങ്ങൾക്ക് ഇടതു ഫ്ലോട്ടുകൾ, വലതു ഫ്ലോട്ടുകൾ അല്ലെങ്കിൽ ഇവ രണ്ടും മായ്ക്കാം:
വ്യക്തമാക്കുക: ഇടത്;
ശരി: വലത്;
വ്യക്തമാക്കുക: രണ്ടും;
നിങ്ങൾ വ്യക്തമായ വസ്തുവകകൾ സജ്ജമാക്കുന്ന ഏതെങ്കിലുമൊരു ഘടകഭാഗം ആ ദിശയിലേക്കിറങ്ങിയ ഒരു ഘടകത്തിന് താഴെയായി കാണപ്പെടും. ഉദാഹരണത്തിന്, ഈ ഉദാഹരണത്തിൽ ടെക്സ്റ്റിന്റെ ആദ്യ രണ്ട് ഖണ്ഡികകൾ മായ്ച്ചിട്ടില്ല, എന്നാൽ മൂന്നാമത്തെത്.
വ്യത്യസ്ത ലേഔട്ട് ഇഫക്റ്റുകൾ നേടുന്നതിന് നിങ്ങളുടെ പ്രമാണങ്ങളിൽ വ്യത്യസ്ത ഘടകങ്ങളുടെ വ്യക്തമായ മൂല്യം പ്ലേ ചെയ്യുക.
ഏറ്റവും രസകരമായ ഫ്ജൗണ്ട് ലേഔട്ടുകളിൽ ഒന്നാണ് ടെക്സ്റ്റിന്റെ ഖണ്ഡികകൾക്കടുത്തായി വലത് അല്ലെങ്കിൽ ഇടത് നിര താഴെയുള്ള ചിത്രങ്ങളുടെ ഒരു പരമ്പരയാണ്. ഇമേജ് കഴിഞ്ഞാൽ സ്ക്രോൾ ചെയ്യാൻ കഴിയാത്തത്ര ദൈർഘ്യം പോലുമില്ലാത്തപക്ഷം, എല്ലാ ചിത്രങ്ങളിലും വ്യക്തമായും മുൻ ചിത്രത്തിന്റെ തൊട്ടുമുഴുവൻ കള്ളിയിൽ ദൃശ്യമാകുമെന്ന് ഉറപ്പുവരുത്തുക.
HTML (ഈ ഖണ്ഡിക ആവർത്തിക്കുക):
പക്ഷേ, അത്തരമൊരു താത്കാലിക താൽക്കാലിക സംവിധാനത്തിൽ വോളണ്ടേറ്ററിനൊപ്പം അവ വീണ്ടും ഇടപെടുകയാണ്. മുരളീധരൻ പ്രോത്സാഹിപ്പിച്ചില്ല, പണിയെടുക്കാനും മറ്റും ചെയ്യാനും.
CSS (ഇടതുവശത്തേക്ക് ചിത്രങ്ങൾ ഫ്ലോട്ട് ചെയ്യാൻ):
img.float {float: left;
വ്യക്തമാക്കുക: ഇടത്;
മാർജിൻ: 5px;
}
വലതുഭാഗത്ത്:
img.float {float: right;
ശരി: വലത്;
മാർജിൻ: 5px;
}
ലേഔട്ടിനായി ഫ്ലോട്ടുകൾ ഉപയോഗിക്കുന്നു
ഫ്ലോട്ട് പ്രോപ്പർട്ടി എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസിലാക്കിയാൽ, അത് നിങ്ങളുടെ വെബ് പേജുകൾ തിരുകാൻ തുടങ്ങും. ഫ്ലോട്ടുചെയ്ത വെബ് പേജ് സൃഷ്ടിക്കാൻ ഞാൻ എടുക്കുന്ന ഘട്ടങ്ങളാണ് ഇവ:
- ലേഔട്ട് ഡിസൈൻ ചെയ്യുക (പേപ്പറോ ഗ്രാഫിക്സ് ഉപകരണമോ അല്ലെങ്കിൽ എന്റെ തലയിൽ).
- പേജ് ഡിവിഷൻ എവിടെയാണെന്ന് തീരുമാനിക്കുക.
- വിവിധ പാത്രങ്ങളുടെ വീതിയും അവയിലുള്ള ഘടകങ്ങളും നിശ്ചയിക്കുക.
- എല്ലാം ഫ്ലോട്ട് ചെയ്യുക. ബ്രൌസർ കാഴ്ച തുറമുഖവുമായി ബന്ധപ്പെടുമ്പോൾ എവിടെയാണെന്ന് എനിക്ക് അറിയാം, അതും ബാഹ്യ കണ്ടെയ്നർ ഘടകം ഇടതുവശത്തേക്ക് ഉയർന്നു പോകുന്നു.
നിങ്ങളുടെ ലേഔട്ട് വിഭാഗങ്ങളുടെ വീതിയെക്കുറിച്ച് നിങ്ങൾക്കറിയാവുന്നിടത്തോളം (ഫ്ലാഗുകൾ നന്നായി) നിങ്ങൾക്കറിയാമെങ്കിൽ, അവയിൽ എവിടെയെങ്കിലും അവ ഒതുക്കാനുള്ള ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉപയോഗിക്കാൻ കഴിയും. നല്ല കാര്യം ആണ്, നിങ്ങൾ ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ അല്ലെങ്കിൽ ഫയർഫോക്സിനു വേണ്ടി വ്യത്യസ്തമായ ബോക്സ് മോഡലിനെ സംബന്ധിച്ചിടത്തോളം വിഷമിക്കേണ്ടതില്ല.