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