ടെക്സ്റ്റ് വലതുവശത്ത് ഒരു ചിത്രം എങ്ങനെ ഫ്ലോട്ട് ചെയ്യും?

ഈ അഞ്ച് മിനിറ്റ് ട്യൂട്ടോറിയൽ എങ്ങനെയാണ് വിശദീകരിക്കുന്നത് എന്ന് വിശദീകരിക്കുന്നു

വാചകത്തിന്റെ വലതു ഭാഗത്ത് ഒരു ചിത്രം എങ്ങനെ ഫ്ലോട്ട് ചെയ്യണമെന്നറിയാൻ നിങ്ങൾക്ക് താല്പര്യമുണ്ടോ? അങ്ങനെയാണെങ്കിൽ, നിങ്ങൾ ഒറ്റയല്ല. പ്രോഗ്രാമർമാർക്ക് വെബ് പേജിൽ ഒരു ഇമേജ് ആവശ്യമായി വരുന്ന നിരവധി വാചകങ്ങൾ ടെക്സ്റ്റിന്റെ വായനയിലോ ചുറ്റുപാടുമായി ചലിപ്പിക്കപ്പെടുന്നു. നന്ദി, ഇമേജുകൾ കൈകാര്യം ചെയ്യുന്നത് ടെക്സ്റ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനു സമാനമാണ്, അതിനാൽ നിങ്ങൾക്ക് ഇത് അനുഭവസമ്പത്ത് ഉണ്ടെങ്കിൽ ഈ പ്രോസസ്സ് ബുദ്ധിമുട്ടുള്ള കാര്യമായിരിക്കില്ല.

വാസ്തവത്തിൽ, CSS ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉപയോഗിച്ച്, നിങ്ങളുടെ ഇമേജ് ടെക്സ്റ്റ് വലതുവശത്ത് ഫ്ലോട്ട് ചെയ്യുന്നത് എളുപ്പമാണ് കൂടാതെ അതിന് ഇടത് വശത്ത് ടെക്സ്റ്റ് ഫ്ലോ ഉണ്ടാകും. എങ്ങനെയെന്നറിയാൻ ഈ അഞ്ചു മിനിറ്റ് ട്യൂട്ടോറിയൽ ഉപയോഗിക്കുക.

ആമുഖം

ആരംഭിക്കുന്നതിന്, ഒരു ഖണ്ഡികയുടെ ഒരു ഖണ്ഡിക എഴുതി ഒരു ഖണ്ഡികയുടെ തുടക്കത്തിൽ ഒരു ചിത്രം ചേർക്കുക. ഇത് ടെക്സ്റ്റിന് മുമ്പുള്ളവയാകണം, എന്നാൽ

ടാഗ് കഴിഞ്ഞാൽ):

സാരാംശം തകരാറിലായെങ്കിലും പലപ്പോഴും അസ്വാസ്ഥ്യമുണ്ടാക്കുന്നതില് തകരാറാണ്. മുരളീധരൻ പ്രോത്സാഹിപ്പിച്ചില്ല, പണിയെടുക്കാനും മറ്റും ചെയ്യാനും. ഞങ്ങളുടെ കുട്ടികൾക്കുള്ള പരിശീലനം അവരുടേതല്ല. മോളിറ്റ് ആനിമേഷൻ ഐഡി തൊഴിൽ ചെയ്യുന്നു.

അടുത്തതായി, ഇമേജിലേക്ക് ഒരു ശൈലി ആട്രിബ്യൂട്ട് ചേർത്ത് ഫ്ലോട്ട് പ്രോപ്പർട്ടി പ്രയോഗിക്കുക:

style = "float: right;" />

നിങ്ങളുടെ വാചകം ചിത്രത്തിനെതിരെ വലതുവശത്തുകൂടി കടന്നുപോകുന്നതിനാൽ വായിക്കാൻ എളുപ്പമാക്കുന്നതിന് ചിത്രത്തിലേക്ക് കുറച്ച് മാർജിനുകൾ ചേർക്കുക:

മാർജിൻ: 0 5px 0 0; " />

മാർജിൻ ഷോർട്ട് ഹാൻഡ് പ്രോപ്പർട്ടി ഓർഡർ ടോപ്പ്, വലത്, താഴെ, ഇടത് ( TRBL ) എന്നിവയിൽ മാർജിനുകൾ ഉപയോഗിക്കുന്നു.

പൊതിയുക

അത് അങ്ങനെ തന്നെ. ഇപ്പോൾ ഒരു ഇമേജ് വലതു വശത്തേക്ക് ചലിപ്പിക്കുന്നത് ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല. ഇടത്തേക്കുള്ള ഒരു ഇമേജ് ഫ്ലോട്ടിംഗിലും മധ്യഭാഗത്തേക്ക് ചലിപ്പിക്കുന്നതിലും നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടാകാം. ആദ്യത്തേത് സാധ്യമാകുമ്പോൾ, നിർഭാഗ്യവശാൽ നിങ്ങൾക്ക് കേന്ദ്രത്തിലേക്ക് ഒരു ചിത്രം ഫ്ലോട്ട് ചെയ്യാൻ കഴിയില്ല, കാരണം ഇത് സാധാരണയായി രണ്ട് നിര ക്രമീകരിക്കണം.