Jassif Team Institution

The <div> Element

<div> तत्व डिफ़ॉल्ट रूप से एक ब्लॉक तत्व है, जिसका अर्थ है कि यह सभी उपलब्ध चौड़ाई लेता है, और अग्रणी और अनुगामी लाइन ब्रेक के साथ आता है।

Example

एक <div> तत्व सभी उपलब्ध चौड़ाई लेता है:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

<div> तत्व में कोई आवश्यक विशेषताएँ नहीं हैं, लेकिन शैली, वर्ग और आईडी सामान्य हैं।

<div> as a container

<div> तत्व का उपयोग अक्सर वेब पेज के हिस्सों को एक साथ समूहित करने के लिए किया जाता है।

Example

HTML तत्वों वाला एक <div> तत्व:

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

Center align a <div> element

यदि आपके पास एक <div> तत्व है जो 100% चौड़ा नहीं है और आप चाहते हैं कि यह केंद्र-संरेखित हो, तो CSS मार्जिन विशेषता को ऑटो पर सेट करें।

Example

<style>
div {
  width:300px;
  margin:auto;
}
</style>

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

Multiple <div> elements

एक एकल पृष्ठ में एकाधिक <div> कंटेनर हो सकते हैं।

Example

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

<div>
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 700,000 inhabitants.</p>
</div>

<div>
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has over 4 million inhabitants.</p>
</div>

Aligning <div> elements side by side

वेब पेज बनाते समय, आप अक्सर दो या दो से अधिक <div> तत्वों को इस तरह एक साथ रखना चाहेंगे:

तत्वों को पार्श्व रूप से संरेखित करने के विभिन्न तरीके हैं, सभी में कुछ सीएसएस स्टाइल शामिल हैं। हम सबसे सामान्य तरीकों पर गौर करेंगे:

.mycontainer div {
  width:33%;
  float:left;
}

div {
  width: 30%;
  display: inline-block;
}

.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}

.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

Exercise

निम्नलिखित कोड पर विचार करें:

<div style='width:200px;margin:auto'>
  <h2>London</h2>
</div>

HTML Tags