രചയിതാവിൽ നിന്ന്:ഞങ്ങളുടെ ബ്ലോഗിന്റെ പേജുകളിലേക്ക് ഞാൻ നിങ്ങളെ വീണ്ടും സ്വാഗതം ചെയ്യുന്നു. ഇന്നത്തെ ലേഖനത്തിൽ, ബ്ലോക്കുകളിലും അവയുടെ ഉള്ളടക്കത്തിലും പ്രയോഗിക്കാൻ കഴിയുന്ന വിവിധ വിന്യാസ സാങ്കേതികതകളെക്കുറിച്ച് സംസാരിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. പ്രത്യേകിച്ചും, css-ൽ ബ്ലോക്കുകൾ എങ്ങനെ വിന്യസിക്കാം, അതുപോലെ ടെക്സ്റ്റ് അലൈൻമെന്റ്.
ബ്ലോക്കുകൾ മധ്യഭാഗത്തേക്ക് വിന്യസിക്കുന്നു
CSS-ൽ, ഒരു ബ്ലോക്ക് കേന്ദ്രീകരിക്കുന്നത് എളുപ്പമാണ്. ഇത് പലർക്കും അറിയപ്പെടുന്ന സാങ്കേതികതയാണ്, എന്നാൽ ഇതിനെക്കുറിച്ച് സംസാരിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു, ഒന്നാമതായി. പാരന്റ് എലമെന്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ തിരശ്ചീനമായി കേന്ദ്രീകൃതമായ വിന്യാസം എന്നാണ് ഇതിനർത്ഥം. എങ്ങനെയാണ് ഇത് ചെയ്യുന്നത്? നമുക്ക് ഒരു കണ്ടെയ്നർ ഉണ്ടെന്നും ഞങ്ങളുടെ പരീക്ഷണ വിഷയം അതിലുണ്ടെന്നും പറയാം:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
ഇത് സൈറ്റ് ഹെഡർ ആണെന്ന് കരുതുക. ഇത് ജാലകത്തിന്റെ മുഴുവൻ വീതിയിലും നീട്ടുന്നില്ല, ഞങ്ങൾ അത് കേന്ദ്രീകരിക്കേണ്ടതുണ്ട്. ഞങ്ങൾ ഇതുപോലെ എഴുതുന്നു:
#തലക്കെട്ട്( വീതി / പരമാവധി - വീതി: 800px ; മാർജിൻ: 0 ഓട്ടോ; |
നമുക്ക് കൃത്യമായ അല്ലെങ്കിൽ പരമാവധി വീതി വ്യക്തമാക്കേണ്ടതുണ്ട്, തുടർന്ന് കീ പ്രോപ്പർട്ടി എഴുതുക - മാർജിൻ: 0 ഓട്ടോ. ഇത് ഞങ്ങളുടെ തലക്കെട്ടിന്റെ പുറം മാർജിനുകൾ സജ്ജമാക്കുന്നു, ആദ്യ മൂല്യം മുകളിലും താഴെയുമുള്ള മാർജിനുകളെ നിർണ്ണയിക്കുന്നു, രണ്ടാമത്തേത് വലത്, ഇടത് അരികുകൾ നിർണ്ണയിക്കുന്നു. മൂല്യം ഓട്ടോ ബ്രൗസറിനോട് ഇരുവശത്തുമുള്ള പാഡിംഗ് യാന്ത്രികമായി കണക്കാക്കാൻ പറയുന്നു, അതുവഴി മൂലകം കൃത്യമായി അതിന്റെ രക്ഷിതാവിനെ കേന്ദ്രീകരിച്ചിരിക്കുന്നു. സുഖപ്രദമായ!
വാചക വിന്യാസം
ഇതും വളരെ ലളിതമായ ഒരു സാങ്കേതികതയാണ്. എല്ലാ ഇൻലൈൻ ഘടകങ്ങളും വിന്യസിക്കാൻ, നിങ്ങൾക്ക് ടെക്സ്റ്റ് അലൈൻ പ്രോപ്പർട്ടിയും അതിന്റെ മൂല്യങ്ങളും ഉപയോഗിക്കാം: ഇടത്, വലത്, മധ്യഭാഗം. രണ്ടാമത്തേത് വാചകത്തെ കേന്ദ്രീകരിക്കുന്നു, അതാണ് നമുക്ക് വേണ്ടത്. നിങ്ങൾക്ക് ഒരു ചിത്രം അതേ രീതിയിൽ വിന്യസിക്കാൻ പോലും കഴിയും, കാരണം ഇത് സ്ഥിരസ്ഥിതിയായി ഒരു ഇൻലൈൻ ഘടകമാണ്.
വാചകം ലംബമായി വിന്യസിക്കുക
എന്നാൽ ഇത് കൂടുതൽ സങ്കീർണ്ണമാണ്. സ്ഥിരസ്ഥിതിയായി, ഒരു ബ്ലോക്ക് കണ്ടെയ്‌നറിൽ വാചകം ലംബമായി കേന്ദ്രീകരിക്കുന്ന ലളിതവും അറിയപ്പെടുന്നതുമായ ഒരു പ്രോപ്പർട്ടി ഇല്ല. എന്നിരുന്നാലും, ലേഔട്ട് ഡിസൈനർമാർ വർഷങ്ങളായി കൊണ്ടുവന്ന നിരവധി സാങ്കേതിക വിദ്യകളുണ്ട്.
പാഡിംഗ് ഉപയോഗിച്ച് ബ്ലോക്ക് ഉയരം സജ്ജമാക്കുക. ഉയരം ഉപയോഗിച്ച് വ്യക്തമായ ഉയരം സജ്ജീകരിക്കുകയല്ല, മറിച്ച് മുകളിലും താഴെയുമുള്ള പാഡിംഗുകൾ ഉപയോഗിച്ച് കൃത്രിമമായി സൃഷ്ടിക്കുക എന്നതാണ് വഴി. നമുക്ക് ഏതെങ്കിലും ബ്ലോക്ക് സൃഷ്ടിച്ച് അതിൽ ഇനിപ്പറയുന്ന പ്രോപ്പർട്ടികൾ എഴുതാം:
div (പശ്ചാത്തലം: #ccc; പാഡിംഗ്: 30px 0; )
ഡിവി( പശ്ചാത്തലം : #cc; പാഡിംഗ്: 30px 0; |
അരികുകളും പാഡിംഗും ദൃശ്യപരമായി കാണിക്കുന്നതിനാണ് പശ്ചാത്തലം. ഇപ്പോൾ ബ്ലോക്കിന്റെ ഉയരം ഈ രണ്ട് ഇൻഡന്റുകളും വരിയും ചേർന്നതാണ്, എല്ലാം ഇതുപോലെ കാണപ്പെടുന്നു:
ബ്ലോക്കിനുള്ള ലൈൻ-ഉയരം നിർവ്വചിക്കുക. നിങ്ങൾക്ക് ഒരു വരി വാചകം വിന്യസിക്കണമെങ്കിൽ ഇത് കൂടുതൽ ശരിയായ മാർഗമാണെന്ന് ഞാൻ കരുതുന്നു. ഇത് ഉപയോഗിച്ച്, ഉയരം പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നിങ്ങൾക്ക് സാധാരണ അനുസരിച്ച് ഉയരം എഴുതാം. ഇതിനുശേഷം, ബ്ലോക്കിന്റെ മൊത്തത്തിലുള്ള ഉയരത്തിന് തുല്യമായ ലൈൻ ഉയരവും അയാൾ സജ്ജീകരിക്കേണ്ടതുണ്ട്.
div (ഉയരം: 60px; ലൈൻ-ഉയരം: 60px; )
ഡിവി( ഉയരം: 60px; ലൈൻ-ഉയരം: 60px; |
ഫലം മുകളിലുള്ള ചിത്രത്തിന് സമാനമായിരിക്കും. നിങ്ങൾ പാഡിംഗ് ചേർത്താലും എല്ലാം പ്രവർത്തിക്കും. എന്നിരുന്നാലും, ഒരു വരിക്ക് മാത്രം. മൂലകത്തിൽ നിങ്ങൾക്ക് കൂടുതൽ വാചകം ആവശ്യമുണ്ടെങ്കിൽ, ഈ രീതി പ്രവർത്തിക്കില്ല.
ഒരു ബ്ലോക്ക് ഒരു ടേബിൾ സെല്ലിലേക്ക് പരിവർത്തനം ചെയ്യുക. ഈ രീതിയുടെ സാരം, ടേബിൾ സെല്ലിന് ലംബ-അലൈൻ ഉണ്ട്: മധ്യഭാഗം, മൂലകത്തെ ലംബമായി കേന്ദ്രീകരിക്കുന്നു. അതനുസരിച്ച്, ഈ സാഹചര്യത്തിൽ ബ്ലോക്ക് ഇനിപ്പറയുന്നതായി സജ്ജീകരിക്കേണ്ടതുണ്ട്:
div (ഡിസ്പ്ലേ: ടേബിൾ-സെൽ; ലംബ-അലൈൻ: മിഡിൽ; )
ഡിവി( ഡിസ്പ്ലേ: പട്ടിക - സെൽ; ലംബമായി - വിന്യസിക്കുക: മധ്യഭാഗം; |
ഈ രീതി നല്ലതാണ്, കാരണം നിങ്ങൾക്ക് ആവശ്യമുള്ളത്ര വാചകം മധ്യഭാഗത്തേക്ക് വിന്യസിക്കാനാകും. എന്നാൽ നമ്മുടെ ഡിവി നെസ്റ്റ് ചെയ്തിരിക്കുന്ന ബ്ലോക്കിലേക്ക് ഡിസ്പ്ലേ: ടേബിൾ എഴുതുന്നതാണ് നല്ലത്, അല്ലാത്തപക്ഷം അത് പ്രവർത്തിച്ചേക്കില്ല.
ശരി, ഇവിടെ നമ്മൾ ഇന്നത്തെ അവസാന സാങ്കേതികതയിലേക്ക് വരുന്നു - ഇതാണ് ബ്ലോക്കുകളുടെ ലംബ വിന്യാസം. വീണ്ടും, ഇതിനായി പ്രത്യേകമായി ഉദ്ദേശിച്ചിട്ടുള്ള ഒരു വസ്തുവും ഇല്ലെന്ന് പറയണം, എന്നാൽ നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട ചില തന്ത്രങ്ങളുണ്ട്.
ഇൻഡന്റുകൾ ഒരു ശതമാനമായി സജ്ജീകരിക്കുക. നിങ്ങൾക്ക് ഒരു പാരന്റ് എലമെന്റിന്റെ ഉയരം അറിയുകയും അതിനുള്ളിൽ മറ്റൊരു ബ്ലോക്ക് ഘടകം സ്ഥാപിക്കുകയും ചെയ്യുന്നുവെങ്കിൽ, ശതമാന പാഡിംഗ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് അത് കേന്ദ്രീകരിക്കാം. ഉദാഹരണത്തിന്, രക്ഷകർത്താവിന് 600 പിക്സൽ ഉയരമുണ്ട്. നിങ്ങൾ അതിൽ 300 പിക്സൽ ഉയരമുള്ള ഒരു ബ്ലോക്ക് സ്ഥാപിക്കുക. മധ്യഭാഗത്ത് നിന്ന് മുകളിലേക്കും താഴേക്കും എത്രമാത്രം പിൻവാങ്ങണം? 150 പിക്സലുകൾ വീതം, ഇത് മാതാപിതാക്കളുടെ ഉയരത്തിന്റെ 25% ആണ്.
അളവുകൾ കണക്കുകൂട്ടലുകൾ അനുവദിക്കുമ്പോൾ മാത്രം ഈ രീതി വിന്യാസം അനുവദിക്കുന്നു. നിങ്ങളുടെ രക്ഷിതാവിന് 887 പിക്സൽ ഉയരമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഒന്നും കൃത്യമായി റെക്കോർഡ് ചെയ്യാൻ കഴിയില്ല, ഇത് ഇതിനകം വ്യക്തമാണ്.
ഒരു ടേബിൾ സെല്ലിലേക്ക് ഒരു ഘടകം ചേർക്കുക. വീണ്ടും, ഞങ്ങൾ പാരന്റ് എലമെന്റിനെ ഒരു ടേബിൾ സെല്ലാക്കി മാറ്റുകയാണെങ്കിൽ, അതിൽ ചേർത്തിരിക്കുന്ന ബ്ലോക്ക് സ്വയമേ ലംബമായി കേന്ദ്രീകരിക്കപ്പെടും. ഇത് ചെയ്യുന്നതിന്, രക്ഷകർത്താവ് വെർട്ടിക്കൽ-അലൈൻ: മിഡിൽ സജ്ജീകരിക്കേണ്ടതുണ്ട്.
ഇതിനുപുറമെ, ഞങ്ങൾ മാർജിൻ: 0 ഓട്ടോയും എഴുതുകയാണെങ്കിൽ, മൂലകം തിരശ്ചീനമായി കേന്ദ്രീകരിക്കപ്പെടും!
നല്ല ദിവസം, ഈ പ്രസിദ്ധീകരണത്തിന്റെ വരിക്കാരും വായനക്കാരും. ഇന്ന് എനിക്ക് വിശദമായി പോയി CSS-ൽ ടെക്സ്റ്റ് എങ്ങനെ കേന്ദ്രീകരിക്കാമെന്ന് നിങ്ങളോട് പറയാൻ ആഗ്രഹിക്കുന്നു. മുമ്പത്തെ ചില ലേഖനങ്ങളിൽ, ഞാൻ ഈ വിഷയത്തിൽ പരോക്ഷമായി സ്പർശിച്ചിട്ടുണ്ട്, അതിനാൽ നിങ്ങൾക്ക് ഈ മേഖലയിൽ കുറച്ച് അറിവുണ്ട്.
എന്നിരുന്നാലും, ഈ പ്രസിദ്ധീകരണത്തിൽ ഒബ്‌ജക്‌റ്റുകൾ വിന്യസിക്കുന്നതിനുള്ള എല്ലാ വ്യത്യസ്ത വഴികളെക്കുറിച്ചും ഞാൻ നിങ്ങളോട് പറയും, കൂടാതെ ഖണ്ഡികകൾ എങ്ങനെ ഇൻഡന്റ് ചെയ്യാമെന്നും റെഡ്‌ലൈൻ ചെയ്യാമെന്നും വിശദീകരിക്കും. അതിനാൽ നമുക്ക് മെറ്റീരിയൽ പഠിക്കാൻ തുടങ്ങാം!
HTML ഉം അതിന്റെ സന്തതികളും ഒപ്പം വിന്യസിക്കുക
ഈ രീതി മിക്കവാറും ഒരിക്കലും ഉപയോഗിക്കില്ല, കാരണം ഇത് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റ് ടൂളുകൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിച്ചിരിക്കുന്നു. എന്നിരുന്നാലും, അത്തരമൊരു ടാഗ് നിലവിലുണ്ടെന്ന് അറിയുന്നത് നിങ്ങളെ ഉപദ്രവിക്കില്ല.
മൂല്യനിർണ്ണയത്തെ സംബന്ധിച്ചിടത്തോളം (ഈ പദം "" ലേഖനത്തിൽ വിശദമായി വിവരിച്ചിരിക്കുന്നു), html സ്പെസിഫിക്കേഷൻ തന്നെ ഇതിന്റെ ഉപയോഗത്തെ അപലപിക്കുന്നു < കേന്ദ്രം>, സാധുതയ്ക്കായി ഒരു പരിവർത്തനം ഉപയോഗിക്കേണ്ടത് ആവശ്യമാണ് ഡോക്‌ടൈപ്പ്>.
ഈ തരംനിരോധിത ഘടകങ്ങളെ കടന്നുപോകാൻ അനുവദിക്കുന്നു.
ഇനി നമുക്ക് ആട്രിബ്യൂട്ടിലേക്ക് പോകാം വിന്യസിക്കുക. ഇത് ഒബ്‌ജക്‌റ്റുകളുടെ തിരശ്ചീന വിന്യാസം സജ്ജമാക്കുകയും ടാഗ് പ്രഖ്യാപനത്തിന് ശേഷം യോജിക്കുകയും ചെയ്യുന്നു. സാധാരണഗതിയിൽ, ഉള്ളടക്കം ഇടതുവശത്തേക്ക് വിന്യസിക്കാൻ ഇത് ഉപയോഗിക്കാം ( ഇടത്തെ), വലത് അരികിൽ ( ശരിയാണ്), കേന്ദ്രീകൃത ( കേന്ദ്രം) കൂടാതെ ടെക്സ്റ്റ് വീതി പ്രകാരം ( ന്യായീകരിക്കുക).
ചുവടെ ഞാൻ ഒരു ഉദാഹരണം നൽകും, അതിൽ ഞാൻ ചിത്രവും ഖണ്ഡികയും മധ്യത്തിൽ സ്ഥാപിക്കും.
ഈ ഉള്ളടക്കം കേന്ദ്രീകൃതമായിരിക്കും.
ചിത്രത്തിന് ഞങ്ങൾ വിശകലനം ചെയ്യുന്ന ആട്രിബ്യൂട്ടിന് അല്പം വ്യത്യസ്തമായ അർത്ഥങ്ങളുണ്ടെന്ന കാര്യം ശ്രദ്ധിക്കുക.
ഞാൻ ഉപയോഗിച്ച ഉദാഹരണത്തിൽ വിന്യസിക്കുക="മധ്യ". ഇതിന് നന്ദി, ചിത്രം വിന്യസിച്ചതിനാൽ വാക്യം ചിത്രത്തിന്റെ മധ്യത്തിൽ വ്യക്തമായി സ്ഥിതിചെയ്യുന്നു.
css-ൽ കേന്ദ്രീകൃത ഉപകരണങ്ങൾ
ബ്ലോക്കുകൾ, ടെക്സ്റ്റ്, ഗ്രാഫിക് ഉള്ളടക്കം എന്നിവ വിന്യസിക്കാൻ രൂപകൽപ്പന ചെയ്തിരിക്കുന്ന CSS പ്രോപ്പർട്ടികൾ കൂടുതൽ തവണ ഉപയോഗിക്കുന്നു. ഇത് പ്രാഥമികമായി ശൈലികൾ നടപ്പിലാക്കുന്നതിനുള്ള സൗകര്യവും വഴക്കവുമാണ്.
അതുകൊണ്ട് ടെക്സ്റ്റ് സെന്റർ ചെയ്യുന്നതിനുള്ള ആദ്യ പ്രോപ്പർട്ടിയിൽ നിന്ന് നമുക്ക് ആരംഭിക്കാം - ഇതാണ് വാചകം-വിന്യസിക്കുക.
വിന്യസിക്കുന്നത് പോലെ തന്നെ ഇത് പ്രവർത്തിക്കുന്നു. കീവേഡുകളിൽ, നിങ്ങൾക്ക് പൊതുവായ ലിസ്റ്റിൽ നിന്ന് ഒന്ന് തിരഞ്ഞെടുക്കാം അല്ലെങ്കിൽ ഒരു പൂർവ്വികന്റെ സവിശേഷതകൾ അവകാശമാക്കാം ( അനന്തരാവകാശം).
css3-ൽ നിങ്ങൾക്ക് 2 പാരാമീറ്ററുകൾ കൂടി സജ്ജമാക്കാൻ കഴിയുമെന്ന് ഞാൻ ശ്രദ്ധിക്കാൻ ആഗ്രഹിക്കുന്നു: ആരംഭിക്കുക- വാചകം എഴുതുന്നതിനുള്ള നിയമങ്ങൾ അനുസരിച്ച് (വലത്തുനിന്ന് ഇടത്തോട്ട് അല്ലെങ്കിൽ തിരിച്ചും), വിന്യാസം ഇടത്തോട്ടോ വലത്തോട്ടോ സജ്ജീകരിക്കുന്നു (ജോലി ഇടത്തോട്ടോ വലത്തോട്ടോ പോലെ) കൂടാതെ അവസാനിക്കുന്നു- ആരംഭത്തിന്റെ വിപരീതം (ഇടത്ത് നിന്ന് വലത്തോട്ട് എഴുത്ത് എഴുതുമ്പോൾ അത് വലത്തോട്ട് പ്രവർത്തിക്കുന്നു, വലത്തുനിന്ന് ഇടത്തേക്ക് - ഇടത്തേക്ക് എഴുതുമ്പോൾ).
വലതുവശത്ത് വാചകം
അവസാനം ഉപയോഗിക്കുന്ന വാക്യം
ഞാൻ ഒരു ചെറിയ തന്ത്രത്തെ കുറിച്ച് പറയാം. ഒരു മൂല്യം തിരഞ്ഞെടുക്കുമ്പോൾ ന്യായീകരിക്കുകഅവസാന വരി താഴെ നിന്ന് അനാകർഷകമായി തൂങ്ങിയേക്കാം. ഉദാഹരണത്തിന്, അത് കേന്ദ്രത്തിൽ സ്ഥാപിക്കുന്നതിന്, നിങ്ങൾക്ക് പ്രോപ്പർട്ടി ഉപയോഗിക്കാം ടെക്സ്റ്റ്-അലൈൻ-അവസാനം.
സൈറ്റ് ഉള്ളടക്കമോ പട്ടിക സെല്ലുകളോ ലംബമായി വിന്യസിക്കാൻ, പ്രോപ്പർട്ടി ഉപയോഗിക്കുക ലംബ-അലൈൻ. എലമെന്റിന്റെ പ്രധാന കീവേഡുകൾ ഞാൻ താഴെ വിവരിച്ചിട്ടുണ്ട്.
| കീവേഡ് | ഉദ്ദേശ്യം |
| അടിസ്ഥാനരേഖ | അടിസ്ഥാന രേഖ എന്ന് വിളിക്കപ്പെടുന്ന ഒരു പൂർവ്വിക രേഖയിലേക്കുള്ള വിന്യാസം വ്യക്തമാക്കുന്നു. പൂർവ്വിക വസ്തുവിന് അത്തരമൊരു രേഖ ഇല്ലെങ്കിൽ, താഴത്തെ അതിർത്തിയിൽ വിന്യാസം സംഭവിക്കുന്നു. |
| മധ്യഭാഗം | മ്യൂട്ടേറ്റഡ് ഒബ്ജക്റ്റിന്റെ മധ്യഭാഗം ബേസ്ലൈനിലേക്ക് വിന്യസിച്ചിരിക്കുന്നു, അതിൽ പാരന്റ് എലമെന്റിന്റെ ഉയരം തറ ചേർക്കുന്നു. |
| താഴെ | തിരഞ്ഞെടുത്ത ഉള്ളടക്കത്തിന്റെ അടിഭാഗം അതിന് താഴെയുള്ള ഒബ്ജക്റ്റിന്റെ അടിയിലേക്ക് ക്രമീകരിക്കുന്നു. |
| മുകളിൽ | താഴത്തെ ഭാഗത്തിന് സമാനമാണ്, എന്നാൽ വസ്തുവിന്റെ മുകൾ ഭാഗം. |
| സൂപ്പർ | കഥാപാത്രത്തെ സൂപ്പർസ്ക്രിപ്റ്റ് ആക്കുന്നു. |
| ഉപ | എലമെന്റ് സബ്സ്ക്രിപ്റ്റ് ഉണ്ടാക്കുന്നു. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
സി INഇ ടികുറിച്ച്TO
|
ഇൻഡന്റേഷനുകൾ
അവസാനം നമ്മൾ ഖണ്ഡിക ഇൻഡന്റുകളിലേക്ക് വരുന്നു. CSS ഭാഷ ഒരു പ്രത്യേക പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു ടെക്സ്റ്റ്-ഇൻഡന്റ്.
അതിന്റെ സഹായത്തോടെ നിങ്ങൾക്ക് ഒരു ചുവന്ന വരയും ഒരു പ്രോട്രഷനും ഉണ്ടാക്കാം (നിങ്ങൾ ഒരു നെഗറ്റീവ് മൂല്യം വ്യക്തമാക്കേണ്ടതുണ്ട്).
ഒരു ചുവന്ന വര സൃഷ്ടിക്കാൻ നിങ്ങൾ ഒരു പരാമീറ്റർ മാത്രം അറിഞ്ഞിരിക്കണം.
ഇതാണ് ലളിതമായ ടെക്സ്റ്റ്-ഇൻഡന്റ് പ്രോപ്പർട്ടി.
ഓരോ ഉദാഹരണവും പ്രായോഗികമായി പരീക്ഷിച്ചവരെ ഞാൻ അഭിനന്ദിക്കുന്നു. എന്റെ ബ്ലോഗിലേക്കുള്ള ലിങ്കുകൾ നിങ്ങളുടെ സുഹൃത്തുക്കൾക്ക് അയക്കുക, സബ്സ്ക്രൈബ് ചെയ്യാൻ മറക്കരുത്. നല്ലതുവരട്ടെ! ബൈ ബൈ!
ആശംസകളോടെ, റോമൻ ചുഷോവ്
വായിക്കുക: 675 തവണ
മിക്കപ്പോഴും, പേജിന്റെ / സ്ക്രീനിന്റെ മധ്യഭാഗത്ത് ഒരു ബ്ലോക്ക് വിന്യസിക്കുക എന്നതാണ് ചുമതല, അതിനാൽ ഒരു ജാവ സ്ക്രിപ്റ്റ് ഇല്ലാതെ, കർക്കശമായ അളവുകളോ നെഗറ്റീവ് ഇൻഡന്റുകളോ സജ്ജീകരിക്കാതെ, ബ്ലോക്ക് അതിന്റെ വലുപ്പം കവിയുന്നുവെങ്കിൽ സ്ക്രോൾബാറുകൾ രക്ഷിതാവിനായി പ്രവർത്തിക്കുന്നു. . സ്ക്രീനിന്റെ മധ്യഭാഗത്തേക്ക് ഒരു ബ്ലോക്ക് എങ്ങനെ വിന്യസിക്കാം എന്നതിനെക്കുറിച്ച് ഇന്റർനെറ്റിൽ ധാരാളം ഏകതാനമായ ഉദാഹരണങ്ങളുണ്ട്. ചട്ടം പോലെ, അവയിൽ മിക്കതും ഒരേ തത്വങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്.
പ്രശ്നം പരിഹരിക്കുന്നതിനുള്ള പ്രധാന വഴികൾ, അവയുടെ ഗുണങ്ങളും ദോഷങ്ങളും ചുവടെയുണ്ട്. ഉദാഹരണങ്ങളുടെ സാരാംശം മനസിലാക്കാൻ, നൽകിയിരിക്കുന്ന ലിങ്കുകളിലെ ഉദാഹരണങ്ങളിൽ ഫല വിൻഡോയുടെ ഉയരം/വീതി കുറയ്ക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു.
ഓപ്ഷൻ 1: നെഗറ്റീവ് ഇൻഡന്റേഷൻ.
സ്ഥാനനിർണ്ണയം തടയുകമുകളിലും ഇടത്തും 50% ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച്, ബ്ലോക്കിന്റെ ഉയരവും വീതിയും മുൻകൂട്ടി അറിഞ്ഞ്, ഒരു നെഗറ്റീവ് മാർജിൻ സജ്ജമാക്കുക, അത് പകുതി വലുപ്പത്തിന് തുല്യമാണ്. തടയുക. ഈ ഓപ്ഷന്റെ ഒരു വലിയ പോരായ്മ നിങ്ങൾ നെഗറ്റീവ് ഇൻഡന്റുകളെ കണക്കാക്കേണ്ടതുണ്ട് എന്നതാണ്. കൂടാതെ തടയുകസ്ക്രോൾബാറുകളാൽ ചുറ്റപ്പെട്ടിരിക്കുമ്പോൾ അത് ശരിയായി പെരുമാറുന്നില്ല - നെഗറ്റീവ് മാർജിനുകൾ ഉള്ളതിനാൽ അത് വെട്ടിക്കളഞ്ഞു.
രക്ഷകർത്താവ് (വീതി: 100%; ഉയരം: 100%; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; ഓവർഫ്ലോ: ഓട്ടോ; ) .ബ്ലോക്ക് (വീതി: 250px; ഉയരം: 250px; സ്ഥാനം: കേവലം; മുകളിൽ: 50%; ഇടത് : 50%; മാർജിൻ: -125px 0 0 -125px; img (പരമാവധി വീതി: 100%; ഉയരം: ഓട്ടോ; ഡിസ്പ്ലേ: ബ്ലോക്ക്; മാർജിൻ: 0 ഓട്ടോ; ബോർഡർ: ഒന്നുമില്ല; ) )
ഓപ്ഷൻ 2. ഓട്ടോമാറ്റിക് ഇൻഡന്റേഷൻ.
കുറവ് സാധാരണമാണ്, എന്നാൽ ആദ്യത്തേതിന് സമാനമാണ്. വേണ്ടി തടയുകഞങ്ങൾ വീതിയും ഉയരവും സജ്ജീകരിച്ച്, ആട്രിബ്യൂട്ടുകൾ മുകളിൽ വലത് താഴെ ഇടത് 0 ആക്കി, മാർജിൻ യാന്ത്രികമായി സജ്ജമാക്കുക. ഈ ഓപ്ഷന്റെ പ്രയോജനം സ്ക്രോൾബാറുകൾ പ്രവർത്തിക്കുന്നു രക്ഷിതാവ്, രണ്ടാമത്തേതിന് 100% വീതിയും ഉയരവും ഉണ്ടെങ്കിൽ. ഈ രീതിയുടെ പോരായ്മ അളവുകളുടെ കർശനമായ ക്രമീകരണമാണ്.
രക്ഷകർത്താവ് (വീതി: 100%; ഉയരം: 100%; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; ഓവർഫ്ലോ: ഓട്ടോ; ) .ബ്ലോക്ക് (വീതി: 250px; ഉയരം: 250px; സ്ഥാനം: കേവലം; മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; മാർജിൻ: ഓട്ടോ; img (പരമാവധി വീതി: 100%; ഉയരം: ഓട്ടോ; ഡിസ്പ്ലേ: ബ്ലോക്ക്; മാർജിൻ: 0 ഓട്ടോ; ബോർഡർ: ഒന്നുമില്ല; ) )
ഓപ്ഷൻ 3. പട്ടിക.
നമുക്ക് ചോദിക്കാം രക്ഷിതാവ്പട്ടിക ശൈലികൾ, സെൽ രക്ഷിതാവ്ടെക്സ്റ്റ് വിന്യാസം മധ്യത്തിലേക്ക് സജ്ജമാക്കുക. എ തടയുകഞങ്ങൾ ലൈൻ ബ്ലോക്ക് മോഡൽ സജ്ജമാക്കി. നമുക്ക് ലഭിക്കുന്ന പോരായ്മകൾ നോൺ-വർക്കിംഗ് സ്ക്രോൾബാറുകളാണ്, പൊതുവേ, പട്ടികയുടെ "എമുലേഷൻ" എന്ന സൗന്ദര്യശാസ്ത്രം അല്ല.
രക്ഷിതാവ് (വീതി: 100%; ഉയരം: 100%; ഡിസ്പ്ലേ: പട്ടിക; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; > .inner ( ഡിസ്പ്ലേ: പട്ടിക-സെൽ; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; ലംബമായി-അലൈൻ: മധ്യം; ) .ബ്ലോക്ക് ( ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; img ( ഡിസ്പ്ലേ: ബ്ലോക്ക്; ബോർഡർ: ഒന്നുമില്ല; ) )
ഈ ഉദാഹരണത്തിലേക്ക് ഒരു സ്ക്രോൾ ചേർക്കുന്നതിന്, നിങ്ങൾ ഡിസൈനിലേക്ക് ഒരു ഘടകം കൂടി ചേർക്കേണ്ടതുണ്ട്.
ഉദാഹരണം: jsfiddle.net/serdidg/fk5nqh52/3.
ഓപ്ഷൻ 4. കപട ഘടകം.
ഈ ഓപ്ഷൻ മുമ്പത്തെ രീതികളിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന എല്ലാ പ്രശ്നങ്ങളും ഇല്ലാത്തതാണ്, കൂടാതെ യഥാർത്ഥ പ്രശ്നങ്ങൾ പരിഹരിക്കുകയും ചെയ്യുന്നു. കാര്യം അതാണ് രക്ഷിതാവ്ശൈലികൾ സജ്ജമാക്കുക കപട ഘടകംമുമ്പ്, അതായത് 100% ഉയരം, കേന്ദ്ര വിന്യാസം, ഇൻലൈൻ ബ്ലോക്ക് മോഡൽ. അതു പോലെ തന്നെ തടയുകഒരു ലൈൻ ബ്ലോക്ക് മോഡൽ സജ്ജീകരിച്ചിരിക്കുന്നു, കേന്ദ്രീകരിച്ചിരിക്കുന്നു. ലേക്ക് തടയുകതാഴെ "വീണില്ല" കപട ഘടകം, ആദ്യത്തേതിന്റെ അളവുകൾ കൂടുതലാകുമ്പോൾ രക്ഷിതാവ്, സൂചിപ്പിക്കുക രക്ഷിതാവ്വൈറ്റ്-സ്പേസ്: നൗറാപ്പ്, ഫോണ്ട് സൈസ്: 0, അതിനുശേഷം തടയുകഇനിപ്പറയുന്നവ ഉപയോഗിച്ച് ഈ ശൈലികൾ റദ്ദാക്കുക - വൈറ്റ്-സ്പെയ്സ്: സാധാരണ. ഈ ഉദാഹരണത്തിൽ, ഫലമായുണ്ടാകുന്ന ഇടം നീക്കം ചെയ്യാൻ ഫോണ്ട്-സൈസ്: 0 ആവശ്യമാണ് രക്ഷിതാവ്ഒപ്പം തടയുകകോഡ് ഫോർമാറ്റിംഗ് കാരണം. സ്ഥലം മറ്റ് വഴികളിൽ നീക്കംചെയ്യാം, പക്ഷേ അത് ഒഴിവാക്കുന്നതാണ് നല്ലത്.
രക്ഷിതാവ് (വീതി: 100%; ഉയരം: 100%; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; ഓവർഫ്ലോ: ഓട്ടോ; വൈറ്റ്-സ്പെയ്സ്: നൗറാപ്പ്; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ഫോണ്ട്-സൈസ്: 0; &: മുമ്പ് ( ഉയരം: 100%; ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ലംബ-അലൈൻ: മധ്യഭാഗം; ഉള്ളടക്കം: ""; ) .ബ്ലോക്ക് (ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; വൈറ്റ്-സ്പേസ്: നോർമൽ; ലംബ-അലൈൻ: മിഡിൽ; ടെക്സ്റ്റ്-അലൈൻ: ഇടത് ; img (ഡിസ്പ്ലേ: ബ്ലോക്ക്; ബോർഡർ: ഒന്നുമില്ല; ) )
അല്ലെങ്കിൽ, വിൻഡോയുടെ ഉയരവും വീതിയും മാത്രം രക്ഷിതാവ് എടുക്കേണ്ടതുണ്ടെങ്കിൽ, മുഴുവൻ പേജും എടുക്കരുത്:
രക്ഷിതാവ് (സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; ഓവർഫ്ലോ: ഓട്ടോ; വൈറ്റ്-സ്പെയ്സ്: നൗറാപ്പ്; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ഫോണ്ട്-സൈസ്: 0; &: മുമ്പ് (ഉയരം: 100%; ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ലംബ-അലൈൻ: മധ്യഭാഗം; ഉള്ളടക്കം: ""; ) .ബ്ലോക്ക് (ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; വൈറ്റ്-സ്പേസ്: നോർമൽ; ലംബ-അലൈൻ: മിഡിൽ; ടെക്സ്റ്റ്-അലൈൻ: ഇടത്; img ( പ്രദർശിപ്പിക്കുക: തടയുക; അതിർത്തി: ഒന്നുമില്ല;))
ഓപ്ഷൻ 5. ഫ്ലെക്സ്ബോക്സ്.
ഏറ്റവും ലളിതവും മനോഹരവുമായ മാർഗ്ഗങ്ങളിലൊന്ന് ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിക്കുക എന്നതാണ്. ഇതിന് അനാവശ്യമായ ശരീരചലനങ്ങൾ ആവശ്യമില്ല, എന്താണ് സംഭവിക്കുന്നതെന്നതിന്റെ സാരാംശം വളരെ വ്യക്തമായി വിവരിക്കുന്നു, കൂടാതെ വളരെ വഴക്കമുള്ളതുമാണ്. ഈ രീതി തിരഞ്ഞെടുക്കുമ്പോൾ ഓർമ്മിക്കേണ്ട ഒരേയൊരു കാര്യം പതിപ്പ് 10 ഉൾപ്പെടെയുള്ള ഐഇയ്ക്കുള്ള പിന്തുണയാണ്. caniuse.com/#feat=flexbox
രക്ഷിതാവ് (വീതി: 100%; ഉയരം: 100%; സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 0; ഇടത്: 0; ഡിസ്പ്ലേ: ഫ്ലെക്സ്; വിന്യസിക്കുക-ഇനങ്ങൾ: മധ്യം; വിന്യസിക്കുക-ഉള്ളടക്കം: കേന്ദ്രം; ന്യായീകരിക്കുക-ഉള്ളടക്കം: മധ്യം; ഓവർഫ്ലോ: ഓട്ടോ; ) .ബ്ലോക്ക് (പശ്ചാത്തലം: #60a839; img ( ഡിസ്പ്ലേ: ബ്ലോക്ക്; ബോർഡർ: ഒന്നുമില്ല; ) )
ഓപ്ഷൻ 6. പരിവർത്തനം.
ഞങ്ങൾ ഘടനയാൽ പരിമിതപ്പെടുത്തിയിട്ടുണ്ടെങ്കിൽ അനുയോജ്യം, കൂടാതെ പാരന്റ് എലമെന്റ് കൈകാര്യം ചെയ്യാൻ ഒരു മാർഗവുമില്ല, പക്ഷേ ബ്ലോക്ക് എങ്ങനെയെങ്കിലും വിന്യസിക്കേണ്ടതുണ്ട്. css ഫംഗ്‌ഷൻ translate() രക്ഷാപ്രവർത്തനത്തിലേക്ക് വരും. 50% സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയത്തിന്റെ മൂല്യം ബ്ലോക്കിന്റെ മുകളിൽ ഇടത് മൂലയെ കൃത്യമായി മധ്യഭാഗത്ത് സ്ഥാപിക്കും, തുടർന്ന് ഒരു നെഗറ്റീവ് വിവർത്തന മൂല്യം ബ്ലോക്കിനെ അതിന്റെ അളവുകളുമായി താരതമ്യപ്പെടുത്തും. നെഗറ്റീവ് ഇഫക്റ്റുകൾ മങ്ങിയ അരികുകളുടെയോ ഫോണ്ട് ശൈലിയുടെയോ രൂപത്തിൽ ദൃശ്യമാകുമെന്നത് ശ്രദ്ധിക്കുക. കൂടാതെ, ഈ രീതി ജാവ-സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ബ്ലോക്കിന്റെ സ്ഥാനം കണക്കാക്കുന്നതിൽ പ്രശ്‌നങ്ങളുണ്ടാക്കാം.ചിലപ്പോൾ, CSS ലെഫ്റ്റ് പ്രോപ്പർട്ടി ഉപയോഗം കാരണം വീതിയുടെ 50% നഷ്ടം നികത്താൻ, ബ്ലോക്കിനായി വ്യക്തമാക്കിയ നിയമം സഹായം: മാർജിൻ-വലത്: -50%; .
രക്ഷകർത്താവ് (വീതി: 100%; ഉയരം: 100%; സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 0; ഇടത്: 0; ഓവർഫ്ലോ: ഓട്ടോ; ) .ബ്ലോക്ക് (സ്ഥാനം: കേവലം; മുകളിൽ: 50%; ഇടത്: 50%; രൂപാന്തരം: വിവർത്തനം ചെയ്യുക( -50%, -50%); img (ഡിസ്പ്ലേ: ബ്ലോക്ക്; ) )
ഓപ്ഷൻ 7. ബട്ടൺ.
ഉപയോക്തൃ ഓപ്ഷൻ എവിടെ തടയുകഒരു ബട്ടൺ ടാഗിൽ ഫ്രെയിം ചെയ്തു. ബട്ടണിന് ഉള്ളിലുള്ള എല്ലാറ്റിനെയും കേന്ദ്രീകരിക്കാനുള്ള സ്വത്ത് ഉണ്ട്, അതായത് ഇൻലൈൻ, ബ്ലോക്ക്-ലൈൻ (ഇൻലൈൻ-ബ്ലോക്ക്) മോഡലിന്റെ ഘടകങ്ങൾ. പ്രായോഗികമായി, ഇത് ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നില്ല.
രക്ഷിതാവ് (വീതി: 100%; ഉയരം: 100%; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; ഓവർഫ്ലോ: ഓട്ടോ; പശ്ചാത്തലം: ഒന്നുമില്ല; അതിർത്തി: ഒന്നുമില്ല; ഔട്ട്‌ലൈൻ: ഒന്നുമില്ല; ) .ബ്ലോക്ക് (പ്രദർശനം: ഇൻലൈൻ-ബ്ലോക്ക്; img (ഡിസ്പ്ലേ: ബ്ലോക്ക്;; ബോർഡർ: ഒന്നുമില്ല; ) )
ബോണസ്
നാലാമത്തെ ഓപ്ഷന്റെ ആശയം ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ബാഹ്യ മാർജിനുകൾ സജ്ജമാക്കാൻ കഴിയും തടയുക, രണ്ടാമത്തേത് സ്ക്രോൾബാറുകളാൽ ചുറ്റപ്പെട്ട് മതിയായ രീതിയിൽ പ്രദർശിപ്പിക്കും.ഉദാഹരണം: jsfiddle.net/serdidg/nfqg9rza/2.
നിങ്ങൾക്ക് ചിത്രം മധ്യഭാഗത്തേക്ക് വിന്യസിക്കാം, ചിത്രം വലുതാണെങ്കിൽ രക്ഷിതാവ്, അതിനെ വലിപ്പത്തിൽ അളക്കുക രക്ഷിതാവ്.
ഉദാഹരണം: jsfiddle.net/serdidg/nfqg9rza/3.
ഒരു വലിയ ചിത്രമുള്ള ഉദാഹരണം:
വെബ്സൈറ്റ് പേജുകളുടെ ലേഔട്ടും സെന്റർ അലൈൻമെന്റും ഒരു സൃഷ്ടിപരമായ ശ്രമമാണ്, ഇത് തുടക്കക്കാർക്ക് പലപ്പോഴും ബുദ്ധിമുട്ടുകൾ ഉണ്ടാക്കുന്നു. എങ്കിൽ അത് എങ്ങനെ ചെയ്യാമെന്ന് നോക്കാം. ഇനിപ്പറയുന്ന ഘടനയുള്ള ഒരു പേജ് നിർമ്മിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് പറയാം:
ഞങ്ങളുടെ പേജിൽ നാല് ബ്ലോക്കുകൾ അടങ്ങിയിരിക്കുന്നു: തലക്കെട്ട്, മെനു, ഉള്ളടക്കം, അടിക്കുറിപ്പ്. പേജ് കേന്ദ്രീകരിക്കാൻ, ഞങ്ങൾ ഈ നാല് ബ്ലോക്കുകളെ ഒരു പ്രധാന ബ്ലോക്കായി സ്ഥാപിക്കും:
സൈറ്റ് തലക്കെട്ട്
ഉള്ളടക്കം
സൈറ്റിന്റെ അടിഭാഗം
ഈ ഘടന ഒരു ഉദാഹരണമായി ഉപയോഗിച്ച്, ഞങ്ങൾ നിരവധി ഓപ്ഷനുകൾ പരിഗണിക്കും.
ഒരു റബ്ബർ സൈറ്റിന്റെ ലേഔട്ടും കേന്ദ്രീകരണവും
ഒരു റബ്ബർ സൈറ്റ് സ്ഥാപിക്കുമ്പോൾ, പ്രധാന അളവെടുപ്പ് യൂണിറ്റ് ഉപയോഗിക്കുന്നത് -% ആണ്, കാരണം സൈറ്റ് വീതിയിലുടനീളം വ്യാപിക്കുകയും എല്ലാ ശൂന്യമായ ഇടവും കൈവശപ്പെടുത്തുകയും വേണം.
അതിനാൽ, "ഹെഡർ", "ഫൂട്ടർ" ബ്ലോക്കുകളുടെ വീതി സ്ക്രീൻ വീതിയുടെ 100% ആയിരിക്കും. "മെനു" ബ്ലോക്കിന്റെ വീതി 30% ആയിരിക്കട്ടെ, "ഉള്ളടക്കം" ബ്ലോക്ക് "മെനു" ബ്ലോക്കിന് അടുത്തായി സ്ഥിതിചെയ്യണം, അതായത്. അതിന് "മെനു" ബ്ലോക്കിന്റെ വീതിക്ക് തുല്യമായ വീതിയുള്ള ഇടത് മാർജിൻ (മാർജിൻ-ഇടത്) ഉണ്ടായിരിക്കണം, അതായത്. മുപ്പത്%.
"മെനു", "ഉള്ളടക്കം" ബ്ലോക്കുകൾ പരസ്പരം അടുത്ത് ഇരിക്കാൻ, നമുക്ക് "മെനു" ബ്ലോക്ക് ഫ്ലോട്ടിംഗ് ആക്കി ഇടത് അരികിലേക്ക് തള്ളാം. ഞങ്ങളുടെ ബ്ലോക്കുകളുടെ പശ്ചാത്തല നിറങ്ങളും ഞങ്ങൾ സജ്ജമാക്കും. ഇനി ഇതെല്ലാം സ്റ്റൈൽ ഷീറ്റിൽ എഴുതാം (style.css പേജിൽ)
#header(പശ്ചാത്തലം:#3e4982; വീതി:100%; ഉയരം:110px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; കളർ:#FFFFFF; font-size:24px; padding-top:40px; ) #menu(പശ്ചാത്തലം:#6173cb; ഫ്ലോട്ട് :ഇടത്; വീതി:30%; ഉയരം:300px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; നിറം:#FFFFFF; ഫോണ്ട്-സൈസ്:18px; പാഡിംഗ്-ടോപ്പ്:10px; ) #content(പശ്ചാത്തലം:#ffffff; മാർജിൻ-ഇടത്:30% ; ഉയരം: 300px; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ) #footer(പശ്ചാത്തലം:#3e4982; ക്ലിയർ:രണ്ടും; വീതി:100%; ഉയരം:50px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; നിറം:#FFFFFF; ഫോണ്ട്-സൈസ്:14px; പാഡിംഗ് ടോപ്പ്:10px;)
ബ്ലോക്കുകളുടെ ഉയരം സോപാധികമായി സജ്ജമാക്കിയതിനാൽ ഫലം ദൃശ്യമാകും. നിങ്ങളുടെ ബ്രൗസറിൽ ഞങ്ങളുടെ പേജ് നോക്കുക:
നിങ്ങൾ ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുകയാണെങ്കിൽ, എല്ലാ ബ്ലോക്കുകളുടെയും വീതി മാറും. ഇത് എല്ലായ്പ്പോഴും സൗകര്യപ്രദമല്ല, കാരണം ... മെനു ബ്ലോക്ക് വലിച്ചുനീട്ടുമ്പോൾ, ശൂന്യമായ ഇടം ദൃശ്യമാകുന്നു. അതിനാൽ, "മെനു" ബ്ലോക്കിന്റെ വീതി പലപ്പോഴും നിശ്ചയിച്ചിട്ടുണ്ട്, അതിനാൽ നമുക്ക് അത് ചെയ്യാം. ഇത് ചെയ്യുന്നതിന്, സ്റ്റൈൽ ഷീറ്റിലെ അനുബന്ധ പ്രോപ്പർട്ടികളുടെ മൂല്യങ്ങൾ മാറ്റിസ്ഥാപിക്കുക:
... #മെനു(പശ്ചാത്തലം:#6173cb; ഫ്ലോട്ട്:ഇടത്; വീതി:200px; ഉയരം:300px; ) #ഉള്ളടക്കം(പശ്ചാത്തലം:#ffffff; മാർജിൻ-ഇടത്:200px; ഉയരം:300px; ) ...
ഇപ്പോൾ ഞങ്ങളുടെ പേജ് കൂടുതൽ സ്വാഭാവികമായി നീളുന്നു. ഫ്ലൂയിഡ് ലേഔട്ട് ഉപയോഗിച്ച്, പേജുകൾ സ്ക്രീനിന്റെ മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുന്നു, അതിനാൽ പേജ് വിന്യാസം ആവശ്യമില്ല.
എന്നാൽ നിങ്ങൾക്ക് വേണമെങ്കിൽ, നിങ്ങളുടെ പേജിന് സ്ക്രീനിന്റെ ഇടത്തും വലത്തും തുല്യമായ പാഡിംഗ് ഉള്ളതാക്കാം. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ "പ്രധാന" ബ്ലോക്കിലേക്ക് ഒരു ശൈലി ചേർക്കേണ്ടതുണ്ട്, അത് മറ്റെല്ലാ ബ്ലോക്കുകൾക്കുമുള്ള ഒരു കണ്ടെയ്നറാണ്:
ഇപ്പോൾ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:
സൈറ്റിന്റെ ലേഔട്ടും കേന്ദ്രവും, നിശ്ചിത വീതി
ഈ സാഹചര്യത്തിൽ, ഞങ്ങളുടെ ബ്ലോക്കുകൾക്കായി ഞങ്ങൾ നിശ്ചിത വലുപ്പങ്ങൾ സജ്ജീകരിക്കേണ്ടതുണ്ട്:
#പ്രധാന (വീതി:800px; ) #തലക്കെട്ട് (പശ്ചാത്തലം:#3e4982; വീതി:800px; ഉയരം:150px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; നിറം:#FFFFFF; ഫോണ്ട്-സൈസ്:24px; പാഡിംഗ്-ടോപ്പ്:40px; ) #മെനു (പശ്ചാത്തലം:#6173cb; float:left; width:200px; ഉയരം: 300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content(പശ്ചാത്തലം:#ffffff; മാർജിൻ-ഇടത്:200px; ഉയരം:300px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; ) #footer(പശ്ചാത്തലം:#3e4982; ക്ലിയർ:രണ്ടും; വീതി:800px; ഉയരം:50px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; നിറം:#FFFFFF; ഫോണ്ട്- വലിപ്പം:14px; പാഡിംഗ്-ടോപ്പ്:10px; )
ഇപ്പോൾ ഞങ്ങളുടെ പേജ് സ്ക്രീനിന്റെ ഇടത് അറ്റത്ത് അമർത്തിയിരിക്കുന്നു.
ഈ സാഹചര്യത്തിൽ, സൈറ്റ് പേജുകളുടെ കേന്ദ്ര വിന്യാസം ഇനിപ്പറയുന്ന രീതിയിൽ ചെയ്യാവുന്നതാണ്. ഞങ്ങളുടെ പേജിന് ഒരു "ബോഡി" ടാഗ് ഉണ്ടെന്ന് ഓർക്കുക, അതിന് വീതിയും കുറച്ച് പാഡിംഗും നൽകാം.
നമുക്ക് ഇത് ചെയ്യാം: "ബോഡി" ടാഗിന് 800 പിക്സൽ വീതിയും ("പ്രധാന" ബ്ലോക്ക് പോലെയുള്ളത്) 50% പാഡിംഗ്-ഇടത്തും നൽകുക. തുടർന്ന് "പ്രധാന" ബ്ലോക്കിന്റെ മുഴുവൻ ഉള്ളടക്കങ്ങളും സ്ക്രീനിന്റെ വലതുവശത്ത് പ്രദർശിപ്പിക്കും (അതായത് മധ്യത്തിൽ നിന്ന് വലത്തേക്ക്):
ഞങ്ങളുടെ "പ്രധാന" ബ്ലോക്ക് സ്ക്രീനിന്റെ മധ്യത്തിൽ സ്ഥിതിചെയ്യുന്നതിന്, അതിന്റെ മധ്യഭാഗം "ബോഡി" ടാഗിന്റെ മധ്യവുമായി പൊരുത്തപ്പെടണം. ആ. നിങ്ങൾ "പ്രധാന" ബ്ലോക്ക് അതിന്റെ പകുതി വലുപ്പത്തിൽ ഇടത്തേക്ക് മാറ്റേണ്ടതുണ്ട്. "പ്രധാന" ബ്ലോക്കിന്റെ വീതി 800 പിക്സലുകൾ ആണ്, അതിനർത്ഥം നിങ്ങൾ അതിനായി "മാർജിൻ-ഇടത്:-400px" എന്ന പ്രോപ്പർട്ടി സജ്ജീകരിക്കേണ്ടതുണ്ട്. അതെ, ഈ പ്രോപ്പർട്ടി നെഗറ്റീവ് മൂല്യങ്ങൾ എടുക്കാം, തുടർന്ന് ഇടത് മാർജിൻ കുറയുന്നു (അതായത് ഇടത്തേക്ക് മാറ്റുന്നു). ഇതുതന്നെയാണ് നമുക്ക് വേണ്ടത്.
സ്റ്റൈൽ ഷീറ്റ് ഇപ്പോൾ ഇതുപോലെ കാണപ്പെടുന്നു:
ബോഡി(വീതി:800px; പാഡിംഗ്-ഇടത്:50%; ) #പ്രധാന(വീതി:800px; മാർജിൻ-ഇടത്:-400px; ) #ഹെഡർ(പശ്ചാത്തലം:#3e4982; വീതി:800px; ഉയരം:150px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ ; നിറം:#FFFFFF; font-size:24px; padding-top:40px; ) #menu(പശ്ചാത്തലം:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content(പശ്ചാത്തലം:#ffffff; മാർജിൻ-ഇടത്:200px; ഉയരം:300px; text-align:center; ) #footer(പശ്ചാത്തലം:#3e4982; clear:രണ്ടും; വീതി:800px; ഉയരം:50px; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; നിറം:#FFFFFF; ഫോണ്ട്-സൈസ്:14px; പാഡിംഗ്-ടോപ്പ്:10px; )
ബ്രൗസറിലെ ഞങ്ങളുടെ പേജ് കൃത്യമായി മധ്യത്തിലാണ് സ്ഥിതി ചെയ്യുന്നത്:
സൈറ്റ് പേജുകൾ കേന്ദ്രീകരിക്കുന്നതിനുള്ള രണ്ട് ഓപ്ഷനുകൾ ഞങ്ങൾ നോക്കി; വാസ്തവത്തിൽ, അവ ഒരു പിടിവാശിയല്ല. നിങ്ങൾക്ക് പരീക്ഷണം നടത്താനും നിങ്ങളുടെ സ്വന്തം പതിപ്പ് കൊണ്ടുവരാനും കഴിയും, വ്യത്യസ്ത ബ്രൗസറുകളിൽ ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് പരിശോധിക്കുക. നിർഭാഗ്യവശാൽ, ഫയർഫോക്സിലോ ഓപ്പറയിലോ നന്നായി കാണിക്കുന്നവ IE യിലും തിരിച്ചും പൂർണ്ണമായും മനസ്സിലാക്കാൻ കഴിയാത്തവിധം പ്രദർശിപ്പിച്ചേക്കാം. കൂടാതെ നാം ഇത് ഓർക്കണം.
നിങ്ങളുടെ സൃഷ്ടിപരമായ അന്വേഷണത്തിൽ നിങ്ങൾക്ക് ആശംസകൾ!
ലേഔട്ട് കൈകാര്യം ചെയ്യേണ്ടി വന്ന നിങ്ങളിൽ പലർക്കും മൂലകങ്ങളെ ലംബമായി വിന്യസിക്കേണ്ടതിന്റെ ആവശ്യകതയും ഒരു മൂലകത്തെ കേന്ദ്രത്തിലേക്ക് വിന്യസിക്കുമ്പോൾ ഉണ്ടാകുന്ന ബുദ്ധിമുട്ടുകൾ അറിയേണ്ടതും ഉണ്ടായിട്ടുണ്ടെന്ന് ഞാൻ കരുതുന്നു.
അതെ, ലംബ വിന്യാസത്തിനായി CSS-ൽ ഒരു പ്രത്യേക മൾട്ടി-വാല്യൂ വെർട്ടിക്കൽ-അലൈൻ പ്രോപ്പർട്ടി ഉണ്ട്. എന്നിരുന്നാലും, പ്രായോഗികമായി ഇത് പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നില്ല. ഇത് കണ്ടുപിടിക്കാൻ ശ്രമിക്കാം.
ഇനിപ്പറയുന്ന സമീപനങ്ങൾ താരതമ്യം ചെയ്യാം. ഇത് ഉപയോഗിച്ച് വിന്യസിക്കുക:
- മേശകൾ,
- ഇൻഡന്റേഷൻ,
- ലൈൻ-ഉയരം
- നീട്ടൽ,
- നെഗറ്റീവ് മാർജിൻ,
- രൂപാന്തരപ്പെടുത്തുക
- കപട ഘടകം
- ഫ്ലെക്സ്ബോക്സ്.
രണ്ട് ഡിവി ഘടകങ്ങൾ ഉണ്ട്, അവയിലൊന്ന് മറ്റൊന്നിനുള്ളിൽ കൂടുകൂട്ടിയിരിക്കുന്നു. അവർക്ക് അനുബന്ധ ക്ലാസുകൾ നൽകാം - ബാഹ്യവും ആന്തരികവും.
ആന്തരിക മൂലകത്തെ ബാഹ്യ മൂലകത്തിന്റെ കേന്ദ്രവുമായി വിന്യസിക്കുക എന്നതാണ് വെല്ലുവിളി.
ആദ്യം, ബാഹ്യവും ആന്തരികവുമായ ബ്ലോക്കുകളുടെ അളവുകൾ വരുമ്പോൾ നമുക്ക് കേസ് പരിഗണിക്കാം അറിയപ്പെടുന്നത്. നമുക്ക് റൂൾ ഡിസ്പ്ലേ ചേർക്കാം: ആന്തരിക ഘടകത്തിലേക്ക് ഇൻലൈൻ-ബ്ലോക്ക്, കൂടാതെ ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ, വെർട്ടിക്കൽ-അലൈൻ: മധ്യഭാഗം പുറം ഘടകത്തിലേക്ക്.
ഇൻലൈൻ അല്ലെങ്കിൽ ഇൻലൈൻ-ബ്ലോക്ക് ഡിസ്പ്ലേ മോഡ് ഉള്ള ഘടകങ്ങൾക്ക് മാത്രമേ വിന്യാസം ബാധകമാകൂ എന്ന് ഓർക്കുക.
നമുക്ക് ബ്ലോക്കുകളുടെ വലുപ്പങ്ങളും പശ്ചാത്തല നിറങ്ങളും ക്രമീകരിക്കാം, അതിലൂടെ നമുക്ക് അവയുടെ ബോർഡറുകൾ കാണാൻ കഴിയും.
പുറം (വീതി: 200px; ഉയരം: 200px; വാചകം-വിന്യാസം: മധ്യഭാഗം; ലംബ-അലൈൻ: മധ്യം; പശ്ചാത്തല-നിറം: #ffc; ) .ഇന്നർ (ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; വീതി: 100px; ഉയരം: 100px; പശ്ചാത്തല നിറം : #fcc;)
ശൈലികൾ പ്രയോഗിച്ചതിന് ശേഷം, ആന്തരിക ബ്ലോക്ക് തിരശ്ചീനമായി വിന്യസിച്ചിരിക്കുന്നതായി ഞങ്ങൾ കാണും, പക്ഷേ ലംബമായിട്ടല്ല:
http://jsfiddle.net/c1bgfffq/
എന്തുകൊണ്ടാണ് അത് സംഭവിച്ചത്?ലംബ-അലൈൻ പ്രോപ്പർട്ടി വിന്യാസത്തെ ബാധിക്കുന്നു എന്നതാണ് കാര്യം ഘടകം തന്നെ, അതിന്റെ ഉള്ളടക്കമല്ല(ടേബിൾ സെല്ലുകളിൽ ഇത് പ്രയോഗിക്കുമ്പോൾ ഒഴികെ). അതിനാൽ, ഈ പ്രോപ്പർട്ടി ബാഹ്യ മൂലകത്തിൽ പ്രയോഗിക്കുന്നത് ഒന്നും ഉണ്ടാക്കിയില്ല. മാത്രമല്ല, ഈ പ്രോപ്പർട്ടി ഒരു ആന്തരിക ഘടകത്തിലേക്ക് പ്രയോഗിക്കുന്നതും ഒന്നും ചെയ്യില്ല, കാരണം ഇൻലൈൻ ബ്ലോക്കുകൾ അടുത്തുള്ള ബ്ലോക്കുകളുമായി ലംബമായി വിന്യസിച്ചിരിക്കുന്നു, ഞങ്ങളുടെ കാര്യത്തിൽ ഞങ്ങൾക്ക് ഒരു ഇൻലൈൻ ബ്ലോക്ക് ഉണ്ട്.
ഈ പ്രശ്നം പരിഹരിക്കാൻ നിരവധി ടെക്നിക്കുകൾ ഉണ്ട്. ചുവടെ ഞങ്ങൾ അവ ഓരോന്നും സൂക്ഷ്മമായി പരിശോധിക്കും.
ഒരു ടേബിൾ ഉപയോഗിച്ച് വിന്യാസം
ഒരു സെല്ലിന്റെ ഒരു ടേബിൾ ഉപയോഗിച്ച് പുറം ബ്ലോക്ക് മാറ്റിസ്ഥാപിക്കുക എന്നതാണ് മനസ്സിൽ വരുന്ന ആദ്യ പരിഹാരം. ഈ സാഹചര്യത്തിൽ, സെല്ലിന്റെ ഉള്ളടക്കത്തിലേക്ക്, അതായത് അകത്തെ ബ്ലോക്കിലേക്ക് വിന്യാസം പ്രയോഗിക്കും.
http://jsfiddle.net/c1bgfffq/1/
ഈ പരിഹാരത്തിന്റെ വ്യക്തമായ പോരായ്മ, സെമാന്റിക് വീക്ഷണകോണിൽ നിന്ന്, വിന്യാസത്തിനായി പട്ടികകൾ ഉപയോഗിക്കുന്നത് തെറ്റാണ്. രണ്ടാമത്തെ പോരായ്മ, ഒരു പട്ടിക സൃഷ്ടിക്കുന്നതിന് ബാഹ്യ ബ്ലോക്കിന് ചുറ്റും മറ്റൊരു ഘടകം ചേർക്കേണ്ടതുണ്ട് എന്നതാണ്.
ടേബിളും ടിഡി ടാഗുകളും ഡിവി ഉപയോഗിച്ച് മാറ്റി സിഎസ്എസിൽ ടേബിൾ ഡിസ്പ്ലേ മോഡ് സജ്ജീകരിക്കുന്നതിലൂടെ ആദ്യത്തെ മൈനസ് ഭാഗികമായി നീക്കംചെയ്യാം.
.ഔട്ടർ-റാപ്പർ (ഡിസ്പ്ലേ: ടേബിൾ; ) .ഔട്ടർ (ഡിസ്പ്ലേ: ടേബിൾ-സെൽ; )
എന്നിരുന്നാലും, തുടർന്നുള്ള എല്ലാ അനന്തരഫലങ്ങളോടും കൂടി പുറം ബ്ലോക്ക് ഇപ്പോഴും ഒരു പട്ടികയായി തുടരും.
ഇൻഡന്റുകൾ ഉപയോഗിച്ച് വിന്യാസം
അകത്തെയും പുറത്തെയും ബ്ലോക്കുകളുടെ ഉയരം അറിയാമെങ്കിൽ, സൂത്രവാക്യം ഉപയോഗിച്ച് അകത്തെ ബ്ലോക്കിന്റെ ലംബമായ ഇൻഡന്റുകൾ ഉപയോഗിച്ച് വിന്യാസം ക്രമീകരിക്കാം: (H outer – H inner) / 2.പുറം (ഉയരം: 200px; ) .ആന്തരികം (ഉയരം: 100px; മാർജിൻ: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
രണ്ട് ബ്ലോക്കുകളുടെയും ഉയരം അറിയുമ്പോൾ പരിമിതമായ എണ്ണം കേസുകളിൽ മാത്രമേ ഇത് ബാധകമാകൂ എന്നതാണ് പരിഹാരത്തിന്റെ പോരായ്മ.
ലൈൻ-ഹൈറ്റ് ഉപയോഗിച്ചുള്ള വിന്യാസം
അകത്തെ ബ്ലോക്ക് ഒന്നിൽ കൂടുതൽ ടെക്സ്റ്റ് അടയ്‌ക്കേണ്ടതില്ലെന്ന് നിങ്ങൾക്കറിയാമെങ്കിൽ, നിങ്ങൾക്ക് ലൈൻ-ഹൈറ്റ് പ്രോപ്പർട്ടി ഉപയോഗിക്കാനും ബാഹ്യ ബ്ലോക്കിന്റെ ഉയരത്തിന് തുല്യമായി ക്രമീകരിക്കാനും കഴിയും. അകത്തെ ബ്ലോക്കിന്റെ ഉള്ളടക്കം രണ്ടാമത്തെ വരിയിലേക്ക് പൊതിയാൻ പാടില്ലാത്തതിനാൽ, വൈറ്റ്-സ്പേസ്: നൗറാപ്പും ഓവർഫ്ലോയും: മറഞ്ഞിരിക്കുന്ന നിയമങ്ങളും ചേർക്കാൻ ശുപാർശ ചെയ്യുന്നു.പുറം (ഉയരം: 200px; ലൈൻ-ഉയരം: 200px; ) .ആന്തരികം (വൈറ്റ്-സ്പേസ്: നൗറാപ്പ്; ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; )
http://jsfiddle.net/c1bgfffq/12/
നിങ്ങൾ അകത്തെ ബ്ലോക്കിനുള്ള ലൈൻ-ഹൈറ്റ് മൂല്യം പുനർ നിർവചിക്കുകയാണെങ്കിൽ, കൂടാതെ ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്, വെർട്ടിക്കൽ-അലൈൻ: മിഡിൽ റൂൾസ് എന്നിവ ചേർക്കുകയും ചെയ്താൽ, മൾട്ടി-ലൈൻ ടെക്സ്റ്റ് വിന്യസിക്കുന്നതിനും ഈ സാങ്കേതികവിദ്യ ഉപയോഗിക്കാം.
പുറം (ഉയരം: 200px; ലൈൻ-ഉയരം: 200px; ) .ഇന്നർ (ലൈൻ-ഉയരം: സാധാരണ; ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ലംബമായി-അലൈൻ: മധ്യം; )
http://jsfiddle.net/c1bgfffq/15/
ബാഹ്യ ബ്ലോക്കിന്റെ ഉയരം അറിഞ്ഞിരിക്കണം എന്നതാണ് ഈ രീതിയുടെ പോരായ്മ.
"സ്ട്രെച്ച്" ഉപയോഗിച്ചുള്ള വിന്യാസം
ബാഹ്യ ബ്ലോക്കിന്റെ ഉയരം അജ്ഞാതമാകുമ്പോൾ ഈ രീതി ഉപയോഗിക്കാം, എന്നാൽ ആന്തരിക ബ്ലോക്കിന്റെ ഉയരം അറിയാം.ഇത് ചെയ്യുന്നതിന് നിങ്ങൾക്ക് ഇത് ആവശ്യമാണ്:
- ബാഹ്യ ബ്ലോക്കിലേക്ക് ആപേക്ഷിക സ്ഥാനനിർണ്ണയം സജ്ജമാക്കുക, ആന്തരിക ബ്ലോക്കിലേക്ക് കേവല സ്ഥാനനിർണ്ണയം;
- മുകളിലെ നിയമങ്ങൾ ചേർക്കുക: 0, താഴെ: 0 അകത്തെ ബ്ലോക്കിലേക്ക്, അതിന്റെ ഫലമായി അത് ബാഹ്യ ബ്ലോക്കിന്റെ മുഴുവൻ ഉയരത്തിലേക്കും നീട്ടും;
- അകത്തെ ബ്ലോക്കിന്റെ ലംബ പാഡിംഗ് യാന്ത്രികമായി സജ്ജമാക്കുക.
http://jsfiddle.net/c1bgfffq/4/
ഈ സങ്കേതത്തിന് പിന്നിലെ ആശയം, വലിച്ചുനീട്ടിയതും പൂർണ്ണമായും സ്ഥാനമുള്ളതുമായ ബ്ലോക്കിന് ഉയരം ക്രമീകരിക്കുന്നത്, ബ്രൗസറിനെ സ്വയമേവ സജ്ജമാക്കിയാൽ ലംബമായ പാഡിംഗ് തുല്യ അനുപാതത്തിൽ കണക്കാക്കാൻ ഇടയാക്കുന്നു എന്നതാണ്.
നെഗറ്റീവ് മാർജിൻ-ടോപ്പ് ഉള്ള വിന്യാസം
ഈ രീതി വ്യാപകമായി അറിയപ്പെടുന്നു, ഇത് പലപ്പോഴും ഉപയോഗിക്കുന്നു. മുമ്പത്തേത് പോലെ, ബാഹ്യ ബ്ലോക്കിന്റെ ഉയരം അജ്ഞാതമായിരിക്കുമ്പോൾ ഇത് ഉപയോഗിക്കുന്നു, എന്നാൽ അകത്തെ ഒന്നിന്റെ ഉയരം അറിയാം.നിങ്ങൾ ബാഹ്യ ബ്ലോക്കിനെ ആപേക്ഷിക പൊസിഷനിംഗിലേക്കും ആന്തരിക ബ്ലോക്ക് കേവല പൊസിഷനിംഗിലേക്കും സജ്ജമാക്കേണ്ടതുണ്ട്. അപ്പോൾ നിങ്ങൾ അകത്തെ ബ്ലോക്കിനെ പുറം ബ്ളോക്കിന്റെ മുകളിലെ ഉയരത്തിന്റെ പകുതിയായി താഴേക്ക് നീക്കേണ്ടതുണ്ട്: 50% അതിന്റെ പകുതി ഉയരത്തിൽ അതിനെ ഉയർത്തുക: -H അകത്തെ / 2.
പുറം (സ്ഥാനം: ബന്ധു; ) .ആന്തരികം (ഉയരം: 100px; സ്ഥാനം: കേവലം; മുകളിൽ: 50%; മാർജിൻ-ടോപ്പ്: -50px; )
http://jsfiddle.net/c1bgfffq/13/
ഇൻഡോർ യൂണിറ്റിന്റെ ഉയരം അറിഞ്ഞിരിക്കണം എന്നതാണ് ഈ രീതിയുടെ പോരായ്മ.
പരിവർത്തനത്തോടുകൂടിയ വിന്യാസം
ഈ രീതി മുമ്പത്തേതിന് സമാനമാണ്, എന്നാൽ ഇൻഡോർ യൂണിറ്റിന്റെ ഉയരം അജ്ഞാതമാകുമ്പോൾ ഇത് ഉപയോഗിക്കാം. ഈ സാഹചര്യത്തിൽ, ഒരു നെഗറ്റീവ് പിക്സൽ പാഡിംഗ് സജ്ജീകരിക്കുന്നതിനുപകരം, ട്രാൻസ്ലേറ്റ് വൈ ഫംഗ്ഷനും -50% മൂല്യവും ഉപയോഗിച്ച് നിങ്ങൾക്ക് ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കാനും ആന്തരിക ബ്ലോക്ക് മുകളിലേക്ക് നീക്കാനും കഴിയും.പുറം (സ്ഥാനം: ബന്ധു;) .ആന്തരികം (സ്ഥാനം: കേവലം; മുകളിൽ: 50%; രൂപാന്തരം: വിവർത്തനംY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
മുമ്പത്തെ രീതിയിൽ മൂല്യം ശതമാനമായി സജ്ജീകരിക്കാൻ കഴിയാത്തത് എന്തുകൊണ്ട്? പാരന്റ് എലമെന്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ശതമാനം മാർജിൻ മൂല്യങ്ങൾ കണക്കാക്കുന്നതിനാൽ, 50% മൂല്യം ബാഹ്യ ബോക്‌സിന്റെ പകുതി ഉയരമായിരിക്കും, കൂടാതെ ആന്തരിക ബോക്സ് അതിന്റെ പകുതി ഉയരത്തിലേക്ക് ഉയർത്തേണ്ടതുണ്ട്. പരിവർത്തന പ്രോപ്പർട്ടി ഇതിന് അനുയോജ്യമാണ്.
ഇൻഡോർ യൂണിറ്റിന് കേവല സ്ഥാനമുണ്ടെങ്കിൽ അത് ഉപയോഗിക്കാൻ കഴിയില്ല എന്നതാണ് ഈ രീതിയുടെ പോരായ്മ.
ഫ്ലെക്സ്ബോക്സുമായി വിന്യാസം
ഫ്ലെക്സിബിൾ ബോക്സ് ലേഔട്ട് (ഫ്ലെക്സ്ബോക്സ് എന്നറിയപ്പെടുന്നു) ഉപയോഗിക്കുന്നതാണ് ലംബ വിന്യാസത്തിന്റെ ഏറ്റവും ആധുനിക മാർഗം. പേജിലെ ഘടകങ്ങളുടെ സ്ഥാനം അയവില്ലാതെ നിയന്ത്രിക്കാനും അവ എവിടെയും ക്രമീകരിക്കാനും ഈ മൊഡ്യൂൾ നിങ്ങളെ അനുവദിക്കുന്നു. ഫ്ലെക്‌സ്‌ബോക്‌സിന്റെ മധ്യഭാഗത്ത് വിന്യാസം വളരെ ലളിതമായ ഒരു ജോലിയാണ്.ബാഹ്യ ബ്ലോക്ക് പ്രദർശിപ്പിക്കുന്നതിന് സജ്ജമാക്കേണ്ടതുണ്ട്: ഫ്ലെക്സും അകത്തെ ബ്ലോക്ക് മാർജിനും: ഓട്ടോ . പിന്നെ എല്ലാം! മനോഹരം, അല്ലേ?
പുറം (പ്രദർശനം: ഫ്ലെക്സ്; വീതി: 200px; ഉയരം: 200px; ) .ആന്തരികം (വീതി: 100px; മാർജിൻ: ഓട്ടോ; )
http://jsfiddle.net/c1bgfffq/14/
ഈ രീതിയുടെ പോരായ്മ ഫ്ലെക്സ്ബോക്സ് ആധുനിക ബ്രൗസറുകൾ മാത്രമേ പിന്തുണയ്ക്കൂ എന്നതാണ്.
ഏത് രീതിയാണ് ഞാൻ തിരഞ്ഞെടുക്കേണ്ടത്?
നിങ്ങൾ പ്രശ്ന പ്രസ്താവനയിൽ നിന്ന് ആരംഭിക്കേണ്ടതുണ്ട്:- വാചകം ലംബമായി വിന്യസിക്കുന്നതിന്, ലംബമായ ഇൻഡന്റുകളോ ലൈൻ-ഹൈറ്റ് പ്രോപ്പർട്ടിയോ ഉപയോഗിക്കുന്നതാണ് നല്ലത്.
- അറിയപ്പെടുന്ന ഉയരമുള്ള (ഉദാഹരണത്തിന്, ഐക്കണുകൾ) തികച്ചും സ്ഥാനമുള്ള ഘടകങ്ങൾക്ക്, നെഗറ്റീവ് മാർജിൻ-ടോപ്പ് പ്രോപ്പർട്ടി ഉള്ള രീതി അനുയോജ്യമാണ്.
- കൂടുതൽ സങ്കീർണ്ണമായ സന്ദർഭങ്ങളിൽ, ബ്ലോക്കിന്റെ ഉയരം അജ്ഞാതമാകുമ്പോൾ, നിങ്ങൾ ഒരു കപട ഘടകമോ പരിവർത്തന പ്രോപ്പർട്ടിയോ ഉപയോഗിക്കേണ്ടതുണ്ട്.
- ഐഇ ബ്രൗസറിന്റെ പഴയ പതിപ്പുകളെ പിന്തുണയ്‌ക്കേണ്ട ആവശ്യമില്ലാത്തതിനാൽ നിങ്ങൾ ഭാഗ്യവാനാണെങ്കിൽ, തീർച്ചയായും, ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിക്കുന്നതാണ് നല്ലത്.
