Div Element in HTML web page design ka ek important part hai. <div> element dusre HTML elements ko group ya container ke roop me rakhne ke liye use hota hai.
<div> element by default block-level element hota hai. Iska matlab:
-
Yeh poori available width le leta hai
-
Iske before aur after line break hota hai
Example:
Yahaan <div> element poori available width le lega.
<div> as a Container
Div Element in HTML ka use aksar web page ke different sections ko group karne ke liye hota hai.
Example:
Yahaan <div> ek container ki tarah multiple elements ko ek jagah group kar raha hai.
Center Align a <div> Element
Agar Div Element in HTML 100% width ka nahi hai aur aap use center align karna chahte ho, to CSS margin property ko auto set kiya jata hai.
Example:
Is example me <div> page ke center me align ho jayega.
Multiple <div> Elements
Div Element in HTML me ek hi web page par multiple div containers use kiye ja sakte hain.
Example:
Yahaan do alag <div> sections create kiye gaye hain.
Aligning <div> Elements Side by Side
Kabhi kabhi web pages me do ya zyada div elements ko side by side rakhna hota hai. Iske liye different CSS methods use kiye ja sakte hain.
1. Float Method
Div Element in HTML ko side by side align karne ke liye float property use ki ja sakti hai.
Originally float ka use text wrapping ke liye hota tha, lekin kaafi time se layout design me bhi use kiya jata hai.
Example:
Yahaan dono <div> side by side show honge.
2. Inline-block Method
Agar Div Element in HTML ka display property block se inline-block kar diya jaye, to <div> elements line break nahi lenge aur side by side show honge.
Example:
3. Flex Method
Div Element in HTML ko side by side align karne ka modern aur flexible method Flexbox hai.
Flex use karne ke liye <div> elements ko ek parent div ke andar wrap karna hota hai aur parent ko flex container banana hota hai.
Example:
Yahaan parent <div> flex container ban gaya hai aur child <div> elements side by side display honge.
4. Grid Method
Div Element in HTML ke layout design ke liye CSS Grid bhi use kiya ja sakta hai.
Grid layout rows aur columns ke saath structured layout system provide karta hai.
Example:
Yahaan parent <div> grid container ban gaya hai aur do columns create ho gaye hain.
Is tarah Div Element in HTML web page ke elements ko group karne, sections banane aur CSS ke through layouts design karne ke liye ek powerful aur flexible container provide karta hai.
