Float & Clear Explained Free web designing Course Tutorials #20
Float & Clear Explained
इस ट्यूटोरियल में, हम CSS में उपलब्ध विभिन्न प्रकार के अलाइनमेंट के बारे में देखेंगे। हम tut21.html नामक एक नई फ़ाइल बनाकर शुरू करेंगे और मूल HTML कोड प्राप्त करने के लिए बॉयलरप्लेट जोड़ेंगे। <शीर्षक> टैग में शीर्षक को संरेखण के रूप में दें।
CSS फ्लोट संपत्ति निर्दिष्ट करती है कि किसी तत्व को कैसे तैरना चाहिए। सीएसएस स्पष्ट संपत्ति निर्दिष्ट करती है कि कौन से तत्व साफ़ किए गए तत्व के बगल में और किस तरफ तैर सकते हैं। फ्लोट प्रॉपर्टी का उपयोग सामग्री की स्थिति और स्वरूपण के लिए किया जाता है, उदाहरण के लिए, एक छवि को कंटेनर में टेक्स्ट पर बाईं ओर तैरने दें। फ्लोट संपत्ति में निम्न में से कोई एक मान हो सकता है-
- वाम- तत्व इसके कंटेनर के बाईं ओर तैरते हैं।
- दाएं- तत्व इसके कंटेनर के दाईं ओर तैरते हैं।
- कोई नहीं- तत्व तैरता नहीं है (यह पाठ में वहीं प्रदर्शित होगा जहां यह होता है)। यह डिफ़ॉल्ट है।
- इनहेरिट- तत्व अपने माता-पिता के फ्लोट वैल्यू को इनहेरिट करता है।
आइए कल्पना करें कि हम किराने की दुकान की वेबसाइट बना रहे हैं और उसी के अनुसार चीजें बेचते हैं।
सीएसएस अनुभाग के लिए, हम सूचीबद्ध प्रत्येक आइटम के लिए अलग-अलग गुण निर्दिष्ट करने के लिए अलग-अलग आईडी और कक्षाएं बनाएंगे। आइए कक्षाओं को परिभाषित करके शुरू करें !
.container {
width: 900px;
border: 3px solid purple;
background-color: rgb(250, 226, 205);
margin: 33px auto;
}
.item {
border: 3px solid grey;
margin: 12px 3px;
padding: 12px 3px;
background: rgb(248, 238, 238);
}
मार्जिन की ऑटो प्रॉपर्टी दोनों सिरों पर मार्जिन को समान रूप से स्वचालित रूप से समायोजित करने की अनुमति देती है। परिणाम इस प्रकार होगा-
तत्वों को तैरने के लिए, दाएं या बाएं हम उन्हें उनकी आईडी द्वारा लक्षित कर सकते हैं। आइए नीचे दिखाए गए अनुसार सभी तत्वों को लक्षित करें-
#fruit {
float: right;
width: 48%;
}
#computer {
float: left;
width: 48%;
}
#stationary {
/* float: left; */
clear: both;
clear: left;
width: 100%;
}
प्रारंभ में, यदि आप तीनों के लिए चौड़ाई 50% निर्धारित करते हैं, तो परिणाम इस प्रकार होगा-
यदि हम फल और कंप्यूटर में कुछ और टेक्स्ट जोड़ते हैं और फ्लोट को हटाते हैं: स्टेशनरी से बाएं विकल्प तो हम पाते हैं कि फल और कंप्यूटर कंटेनर के दाईं ओर तैरेंगे और स्टेशनरी सेक्शन को इस प्रकार ओवरलैप करेंगे-
इससे बचने के लिए हम clear नाम की प्रॉपर्टी का इस्तेमाल करते हैं। यदि हम स्पष्ट लिखते हैं: दोनों, तो अन्य दोनों तत्व स्थिर खंड को ओवरलैप नहीं करेंगे।
पैराग्राफ के लिए, हमारे पास दाएं, बाएं, केंद्र और औचित्य जैसे विभिन्न संरेखण विकल्प हैं। दायाँ संरेखण पाठों को दाईं ओर, बाएँ संरेखण को बाईं ओर ले जाएगा और इसी तरह।
p, h3 {
/* text-align: right;
text-align: left;
text-align: center; */
text-align: justify;
}
हालांकि, अब हम फ्लोट और क्लियर प्रॉपर्टी का ज्यादा इस्तेमाल नहीं करते हैं। इसके बजाय, हम फ्लेक्सबॉक्स जैसे गुणों का उपयोग करते हैं। लेकिन तब भी आपको फ्लोट और क्लियर की अवधारणाओं से अवगत होना चाहिए। आगामी ट्यूटोरियल्स में, हम नेविगेशन बार आदि जैसे और अधिक अलग-अलग लेआउट देखेंगे। तब तक ट्यूटोरियल के साथ बने रहें।
Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alignment</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Ubuntu', sans-serif;
}
.container {
width: 900px;
border: 3px solid purple;
background-color: rgb(250, 226, 205);
margin: 33px auto;
}
.item {
border: 3px solid grey;
margin: 12px 3px;
padding: 12px 3px;
background: rgb(248, 238, 238);
}
#fruit {
float: right;
width: 48%;
}
#computer {
float: left;
width: 48%;
}
#stationary {
/* float: left; */
clear: both;
clear: left;
width: 100%;
}
p, h3 {
/* text-align: right;
text-align: left;
text-align: center; */
text-align: justify;
}
h1 {
margin: 23px auto;
width: 455px;
}
</style>
</head>
<body>
<div class="container">
<h1> Welcome to my store </h1>
<div id="fruit" class="item">
<h3>Fruits</h3>
<p id="fruitpara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae. Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Aspernatur fugiat iusto vel. Qui, veniam nam, enim dolore deleniti dignissimos
veritatis tenetur animi sunt voluptatem laboriosam, nihil inventore molestias totam. Quas ducimus
quibusdam quaerat necessitatibus.</p>
</div>
<div id="computer" class="item">
<h3>Computer</h3>
<p id="computerpara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Rerum commodi vitae exercitationem necessitatibus laboriosam corporis dicta, eveniet
architecto reprehenderit eum id repudiandae deleniti fugiat fugit inventore ea dolorum neque amet nulla
vero culpa. Accusamus.</p>
</div>
<div id="stationary" class="item">
<h3>Stationary</h3>
<p id="stationarypara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae.</p>
</div>
<div id="glasses" class="item">
<h3>Stationary</h3>
<p id="glassespara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae.</p>
</div>
</div>
</body>
</html>
