ഒരു വെബ്പേജിലെ വാചകത്തിന്റെ ഇടതുവശത്ത് ഒരു ചിത്രം എങ്ങനെ ഫ്ലോട്ട് ചെയ്യാം

ഒരു വെബ്പേജ് ലേഔട്ടിന്റെ ഇടതുവശത്തേക്ക് ഒരു ഇമേജ് ചേർക്കുന്നതിന് CSS ഉപയോഗിക്കൽ

ഇന്ന് ഏതാണ്ട് ഒരു വെബ് പേജും നോക്കൂ, ആ പേജുകളുടെ ബാക്കിയെക്കുറിച്ചുള്ള വാചകവും ചിത്രങ്ങളും ചേർക്കുന്നതും നിങ്ങൾ കാണും. ഒരു പേജിലേക്ക് പാഠവും ഇമേജുകളും ചേർക്കാൻ വളരെ എളുപ്പമാണ്. ഇമേജുകൾ മൂലകത്തിന്റെ ഉപയോഗത്തിൽ ഉൾപ്പെടുത്തിക്കൊണ്ടുള്ള പാരഗ്രാഫുകൾ, ലിസ്റ്റുകൾ, ഹെഡിംഗ്സ് എന്നിവ പോലുള്ള സ്റ്റാൻഡേർഡ് HTML ടാഗുകൾ ഉപയോഗിച്ചാണ് ടെക്സ്റ്റ് കോഡ് ചെയ്തിരിക്കുന്നത്.

ആ വാചകവും ആ ഇമേജുകളും ഒരുമിച്ച് പ്രവർത്തിക്കുവാനുള്ള കഴിവ് മഹത്തായ വെബ് ഡിസൈനർമാരെ വേറിട്ടു നിർത്തുന്നു എന്നതാണ്. നിങ്ങളുടെ ടെക്സ്റ്റും ഇമേജുകളും മറ്റൊന്നിനുശേഷം ഒന്നായി ദൃശ്യമാകണമെന്നില്ല, അങ്ങനെയാണ് ഈ ബ്ലോക്ക്-ലെവൽ ഘടകങ്ങൾ സ്ഥിരസ്ഥിതിയായി ലേഔട്ടിലുള്ളതെന്ന്. ഇല്ല, നിങ്ങളുടെ വെബ് പേജിന്റെ വിഷ്വൽ ഡിസൈൻ ആത്യന്തികമായി എന്താവും എഴുത്തിലും ചിത്രങ്ങളിലും ഒന്നിച്ചുവരുന്നത് എന്നതിനേക്കുറിച്ച് നിങ്ങൾക്ക് കുറച്ച് നിയന്ത്രണം വേണം.

ഒരു പേജിന്റെ ഇടതുവശത്തായി അതിനെ ഒഴുകുമ്പോൾ ഒരു പേജിന്റെ ഇടതുവശത്തായി വിന്യസിച്ചിരിക്കുന്ന ചിത്രത്തിൽ പ്രിന്റ് ചെയ്ത ഡിസൈനിനും വെബ് പേജുകൾക്കുമുള്ള പൊതുവായ ഒരു ഡിസൈൻ ചികിത്സയാണ്. വെബ് പദങ്ങളിൽ, ഈ ഇഫക്റ്റ് ചിത്രമെടുക്കുന്നതായി അറിയപ്പെടുന്നു . "ഫ്ലോട്ട്" എന്നതിനായുള്ള CSS പ്രോപ്പർട്ടിയിൽ ഈ രീതി നേടുന്നു. ഇടതുവശത്തുള്ള ഇടതുവശത്തായി ചിത്രം വലതുവശത്തേക്ക് ഒഴുകുന്നത് ഈ വസ്തു അനുവദിക്കുന്നു. (അല്ലെങ്കിൽ അതിന്റെ ഇടതുവശത്ത് വലതു ചേർത്തിരിക്കുന്ന ചിത്രത്തിൽ.) ഈ വിഷ്വൽ എഫക്റ്റ് എങ്ങനെ നേടാം എന്ന് നമുക്ക് നോക്കാം.

HTML ൽ ആരംഭിക്കുക

നിങ്ങൾ ചെയ്യേണ്ടത് ആദ്യം പ്രവർത്തിക്കാൻ ചില HTML ഉണ്ടായിരിക്കും. ഉദാഹരണത്തിന്, ഒരു ഖണ്ഡികയുടെ ഒരു ഖണ്ഡിക എഴുതുകയും, ഒരു ഖണ്ഡിക ആമുഖത്തിൽ ഒരു ചിത്രം ചേർക്കുകയുമാണ് (ടെക്സ്റ്റിന് മുമ്പ്, എന്നാൽ തുറന്നതിനു ശേഷം

ടാഗ്). ആ HTML മാർക്ക്അപ്പ് ഇതുപോലെ കാണപ്പെടുന്നു:

ഖണ്ഡികയുടെ ടെക്സ്റ്റ് ഇവിടെ കാണാം. ഈ ഉദാഹരണത്തിൽ, നമുക്ക് ഒരു ഫോട്ടോയുടെ ഒരു ഇമേജ് ഉണ്ട്, അതിനാൽ ഈ വാചകം തലവാചകം കൊണ്ടുള്ള വ്യക്തിയെ കുറിച്ചായിരിക്കാം.

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

ഖണ്ഡികയുടെ ടെക്സ്റ്റ് ഇവിടെ കാണാം. ഈ ഉദാഹരണത്തിൽ, നമുക്ക് ഒരു ഫോട്ടോയുടെ ഒരു ഇമേജ് ഉണ്ട്, അതിനാൽ ഈ വാചകം തലവാചകം കൊണ്ടുള്ള വ്യക്തിയെ കുറിച്ചായിരിക്കാം.

ഈ "ഇടതുപക്ഷ" വർഗം സ്വന്തമായി ഒന്നുംതന്നെ ചെയ്യുന്നില്ലെന്നത് ശ്രദ്ധിക്കുക! നമുക്ക് ആവശ്യമുള്ള ശൈലി നേടുന്നതിന്, അടുത്തതായി CSS ഉപയോഗിക്കേണ്ടതുണ്ട്.

CSS ശൈലികൾ

"HTML" ന്റെ ക്ലാസ് ആട്രിബ്യൂട്ട് ഉൾപ്പെടെയുള്ള നമ്മുടെ HTML ഉപയോഗിച്ചുകൊണ്ട് നമുക്ക് ഇപ്പോൾ CSS ലേക്ക് മാറാൻ കഴിയും. ഞങ്ങളുടെ ചിത്രത്തിൽ ഒരു ആധികാരിക കൂട്ടിച്ചേർക്കപ്പെടും, അത് ആ ഇമേജ് ഫ്ലോട്ട് ചെയ്യുകയും അതിന് അടുത്തുള്ള ഒരു ചെറിയ പാഡ്ഡിനെ ചേർക്കുകയും ചെയ്യും, അങ്ങനെ ആ ചിത്രത്തിൽ ആത്യന്തികമായി മൂടുവാൻ പോകുന്ന വാചകം അത് വളരെ അടുത്തടുക്കില്ല. നിങ്ങൾ എഴുതാനിടയുള്ള CSS ഇതാണ്:

.left {float: left; പാഡിംഗ്: 0 20px 20px 0; }

ഈ ശൈലി ഇടതുവശത്തേക്ക് ചിത്രം തെളിക്കുന്നു , കൂടാതെ ചിത്രത്തിന്റെ വലത് ഭാഗത്തും ചുവട്ടിലും അല്പം പാഡ്ഡിംഗ് (ചില CSS ഷോർട്ട് ഹാൻഡ് ഉപയോഗിച്ച്) ചേർക്കുന്നു.

ഒരു ബ്രൗസറിൽ ഈ HTML അടങ്ങിയിരിക്കുന്ന പേജ് നിങ്ങൾ അവലോകനം ചെയ്തെങ്കിൽ, ചിത്രം ഇപ്പോൾ ഇടതുവശത്തായി വിന്യസിക്കും, രണ്ടും തമ്മിലുള്ള ഒരു ഉചിതമായ അളവ് ഉപയോഗിച്ച് പാരഗ്രാഫിന്റെ വാക്യം അതിന്റെ വലതുഭാഗത്ത് പ്രത്യക്ഷപ്പെടും. ഞങ്ങൾ ഉപയോഗിച്ച "ഇടത്" ന്റെ വർക്ക് മൂല്യം ഏകപക്ഷീയമാണ്. "ഇടത്" എന്ന പദം ഒന്നിനും ചെയ്തില്ല. ഇത് നിങ്ങൾ വരുത്തുന്ന വിഷ്വൽ മാറ്റങ്ങളെ ആധാരമാക്കിയുള്ള ഒരു യഥാർത്ഥ CSS ശൈലിയിൽ പ്രവർത്തിക്കുന്ന ഒരു ക്ലാസ് ആട്രിബ്യൂട്ട് ഉണ്ടായിരിക്കണം .

ഈ ശൈലികൾ നേടുന്നതിന് ഇതര മാർഗങ്ങൾ

ഇമേജ് എലമെന്റിനായി ഒരു ക്ലാസ് ആട്രിബ്യൂട്ട് നൽകുന്നതും തുടർന്ന് ഒരു എലൊരു സെറ്റ് സ്റ്റൈൽ എന്റർ ചെയ്യുക. ഇമേജിന്റെ ക്ലാസ് മൂല്യം എടുക്കുകയും, അതിനെ കൂടുതൽ നിർദ്ദിഷ്ട സെലക്ടർ എഴുതിക്കൊണ്ട് അത് CSS ഉപയോഗിച്ച് സംബദ്ധിക്കുകയും ചെയ്യാം. ഉദാഹരണത്തിന്, ഒരു ചിത്രം നോക്കിയാൽ ആ ഇമേജ് ഒരു പ്രധാന ഭാഗമായി "പ്രധാന-ഉള്ളടക്ക" ക്ലാസ് മൂല്യമുള്ളതാണ്.