ഒരു വെബ് പേജിലെ ഇനങ്ങളുടെ സ്ഥാനമാറ്റം അതിന്റെ മൊത്തം രൂപകൽപ്പനയ്ക്ക് അത്യന്താപേക്ഷിതമാണ്. പട്ടികകൾ ഉപയോഗിക്കുന്നതിനുപയോഗിക്കുന്ന ലേഔട്ടുകളെ സ്വാധീനിക്കുന്നതിനുള്ള മറ്റ് മാർഗ്ഗങ്ങളുണ്ട് ( അത് ഞങ്ങൾ ശുപാർശചെയ്യാത്തത് ), ഏറ്റവും മികച്ചത് CSS ഉപയോഗിക്കേണ്ടതാണ് .
ചുവടെ, ലളിതമായ CSS രീതി ഇൻ-ലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നത് എങ്ങനെ ചിത്രങ്ങളിലേക്കോ പട്ടികകളിലേക്കോ, ഖണ്ഡികകളിലേക്കോ അതിലധികമോ അലൈൻ ചെയ്യാൻ ഉപയോഗിക്കാം.
കുറിപ്പ്: ബാഹ്യ ശൈലി ഷീറ്റുകളിലും ഈ രീതികൾ ഉപയോഗിക്കാവുന്നതാണ്, പക്ഷേ ഇത് വ്യക്തിഗത ഇനങ്ങൾക്കും ബാധകമാകാനും സാധ്യതയുണ്ട്, താഴെ പറയുന്നതു പോലെ ഇൻ-ലൈൻ സ്റ്റൈലിംഗ് ഉപയോഗിക്കുന്നത് നല്ലതാണ്.
ടെക്സ്റ്റ് ഖണ്ഡികകൾ വിന്യസിക്കുക
നിങ്ങളുടെ വെബ് പേജ് പുറത്തെടുക്കുന്നതിൽ ആരംഭിക്കുന്ന ആദ്യപടിയാണ് ഖണ്ഡിക ടാഗുകൾ. ഇത് ടാഗുകൾ തുറക്കുകയും അടയ്ക്കുകയും ചെയ്യുന്നു:
ഒരു ഖണ്ഡികയിലെ വാചകത്തിന്റെ സഹജമായ വിന്യാസം പേജിന്റെ ഇടതുവശത്താണ്, പക്ഷേ നിങ്ങളുടെ വലതുഭാഗത്തേക്കും കേന്ദ്രത്തിലേക്കും നിങ്ങളുടെ ഖണ്ഡികകളും എകീകരിക്കുക.
ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതിലൂടെ, പാരന്റ് ഘടകത്തിന്റെ വലതുഭാഗത്ത് അല്ലെങ്കിൽ ഇടതുവശത്തുള്ള ഖണ്ഡികകൾ ചേർക്കുന്നതിന് നിങ്ങളെ അനുവദിക്കുന്നു. ആ പേരന്റ് എലമെൻറിൽ ഉള്ള മറ്റെല്ലാ മൂലകങ്ങളും വസ്തുക്കളിൽ നിന്ന് ഒഴുകും.
ഒരു ഖണ്ഡികയിൽ മികച്ച പ്രഭാവം ലഭിക്കുന്നതിന്, കണ്ടെയ്നറിൽ (പേരന്റ്) ഘടകത്തെക്കാൾ ചെറുതായ ഒരു ഖണ്ഡികയിലെ വീതി ക്രമീകരിക്കാൻ കഴിയുന്നതാണ്.
ടെക്സ്റ്റുകൾ ഉള്ളിലെ വരികൾ അലൈൻ ചെയ്യുക
അതായതു്, ഖണ്ഡികാ പാഠത്തിനുള്ള ഏറ്റവും രസകരമായ വിന്യാസം "ന്യായീകരിയ്ക്കുക" ആണ്, ടെക്സ്റ്റ് അഡ്രസ് തിരഞ്ഞു് കാണിയ്ക്കുന്നതിനു് ബ്രൌസറിനു് ആവശ്യമുണ്ടു്, അതു് പ്രധാനമായും വിൻഡോയുടെ വലത്തേയ്ക്കും ഇടത്തേയ്ക്കും.
ഒരു ഖണ്ഡികയിലെ വാചകം ന്യായീകരിക്കാൻ, നിങ്ങൾ ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കും.
ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു ഖണ്ഡികയിലെ എല്ലാ ഭാഗങ്ങളും വലതുവശത്തോ ഇടത്തോട്ടോ (സ്ഥിരസ്ഥിതി) വിന്യസിക്കാം.
ടെക്സ്റ്റ്-അലൈന് പ്രോപ്പർട്ടി മൂലത്തിൽ ഉള്ള ടെക്സ്റ്റ് വിന്യസിക്കും. സാങ്കേതികമായി, ഖണ്ഡികയിലോ മറ്റ് മൂലകിലോ ഉള്ള ചിത്രങ്ങളെ വിന്യസിക്കാൻ പറ്റില്ല, പക്ഷെ മിക്ക ബ്രൗസറുകളും ഈ പ്രോപ്പർട്ടിയ്ക്കായി ഇൻലൈൻ ആയി ചിത്രീകരിക്കുന്നു.
ഇമേജുകൾ ക്രമീകരിക്കൽ
ഒരു ഇമേജ് ടാഗിൽ ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉപയോഗിക്കുമ്പോൾ താങ്കൾക്ക് പേജിൽ ചിത്രങ്ങളുടെ സ്ഥാനം നിർവചിക്കാം, അവ വാചകം ചുറ്റിപ്പിടിക്കും.
മുകളിലുള്ള ഖണ്ഡികകൾ പോലെ ചിത്രം ടാഗിലെ ഫ്ലോട്ട് സ്റ്റൈൽ പ്രോപ്പർട്ടി പേജിൽ നിങ്ങളുടെ ചിത്രം സ്ഥാപിക്കും കൂടാതെ ആ ചിത്രത്തിന് ചുറ്റുമുള്ള വാചകവും മറ്റ് ഘടകങ്ങളും എങ്ങനെ പറയാനാകും എന്ന് ബ്രൌസറിനോട് പറയുന്നു.
സ്ക്രീനിന്റെ ഇടതുവശത്തേക്ക് ചിത്രം പ്രദർശിപ്പിക്കുന്നതു പോലെ മുകളിലുള്ള ഇമേജ് ടാഗ് പിന്തുടരുന്ന വാചകം ഇമേജിന്റെ വലതുവശത്തേക്ക് ഒഴുകും.
ചിത്രത്തിനുചുറ്റും റാപ്പിംഗ് നിർത്താൻ ഞാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞാൻ വളരെ വ്യക്തമായ സ്വഭാവം ഉപയോഗിക്കുന്നു:
കൂടുതൽ ഖണ്ഡികകൾ ക്രമീകരിക്കുക
എന്നിരുന്നാലും, നിങ്ങൾ ഒരു പാരഗ്രാഫിലോ അല്ലെങ്കിൽ ചിത്രത്തിലോ കൂടുതൽ വിന്യസിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ എന്തു ചെയ്യണം? നിങ്ങൾ ഓരോ ഖണ്ഡികയിലും ഒരു ശൈലി ഉപയോഗിക്കാം, എന്നാൽ കൂടുതൽ ഫലപ്രദമായ ഉപയോഗിക്കുന്ന ടാഗ് ഉണ്ട്:
ടാഗ് ആന്റ് സ്റ്റൈൽ പ്രോപ്പർട്ടി (ഫ്ലോട്ട് അല്ലെങ്കിൽ ടെക്സ്റ്റ് അലൈൻ) ഉപയോഗിച്ച് ടെക്സ്റ്റും ഇമേജുകളും ( HTML ടാഗുകൾ ഉൾപ്പടെ) ലളിതമായി ചുറ്റുന്നു. ആ ഡിവിഷനിലെ എല്ലാം നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന രീതിയിൽ വിനിയോഗിക്കും.
ഡിവിഷനിലെ ഖണ്ഡികകളിലേക്കോ ചിത്രങ്ങളിലേക്കോ ചേർക്കുന്ന അലൈനുകൾ ടാഗ് മറികടന്ന് ആദരിക്കും.