सीएसएस लेआउट - फ्लॉटिंग इस्टेंस

इस पृष्ठ में सामान्य फ्लोट के मामले प्रदान किए गए हैं।

ग्रिड / समान चौड़ाई वाले बॉक्स

Box 1
Box 2
Box 1
Box 2
बॉक्स 3

इसके द्वारा float विशेषता, आसानी से फ्लोटिंग सामग्री बॉक्स को साथ-साथ फ्लोट करने की अनुमति देती है:

उदाहरण

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* तीन बॉक्स (चार बॉक्स के लिए 25%，दो बॉक्स के लिए 50%，इस प्रकार ही) */
  padding: 50px; /* यदि आप चित्रों के बीच अंतर जोड़ना चाहते हैं */
}

अपने आप साबित करें

box-sizing क्या है?

आप आसानी से तीन फ्लोटिंग बॉक्स को साथ-साथ बना सकते हैं। लेकिन जब आप प्रत्येक बॉक्स की चौड़ाई बढ़ाने के लिए कुछ सामग्री जोड़ते हैं (उदाहरण के लिए, इनरीपेडिंग या बॉर्डर), तो यह बॉक्स नुकसान से फोड़ जाता है। box-sizing विशेषता हमें बॉक्स के कुल चौड़ाई (और ऊंचाई) में इनरीपेडिंग और बॉर्डर को शामिल करने की अनुमति देती है, ताकि इनरीपेडिंग बॉक्स के अंदर रहे और न टूटे।

आप हमारे CSS बॉक्स साइजिंग इस चाप में box-sizing विशेषता के बारे में अधिक जानकारी सीखें।

चित्रों को साथ-साथ

इस तरह के बॉक्स (The grid of boxes) को चित्रों को साथ-साथ दिखाने के लिए भी इस्तेमाल किया जा सकता है:

उदाहरण

.img-container {
  float: left;
  width: 33.33%; /* तीन बॉक्स (चार बॉक्स के लिए 25%，दो बॉक्स के लिए 50%，इस प्रकार ही) */
  padding: 5px; /* यदि आप चित्रों के बीच अंतर जोड़ना चाहते हैं */
}

अपने आप साबित करें

समान चौड़ाई वाला बॉक्स

इस प्रभाव में, आपने सीखा कि कैसे समान चौड़ाई के साथ फ्लोटिंग बॉक्स को साथ-साथ फ्लोट करें। लेकिन समान ऊंचाई वाले फ्लोटिंग बॉक्स को बनाना आसान नहीं है। हालांकि, तेज़ समाधान इस तरह से एक निश्चित ऊंचाई सेट करना है:

Box 1

कुछ सामग्री, कुछ सामग्री, कुछ सामग्री

Box 2

कुछ सामग्री, कुछ सामग्री, कुछ सामग्री

कुछ सामग्री, कुछ सामग्री, कुछ सामग्री

कुछ सामग्री, कुछ सामग्री, कुछ सामग्री

उदाहरण

.box {
  height: 500px;
}

अपने आप साबित करें

लेकिन, ऐसा करने से फ्लेक्सबॉक्स खो देते हैं। यदि आप सुनिश्चित कर सकते हैं कि बॉक्स में हमेशा एकसी संख्या की सामग्री होगी, तो यह ठीक है। लेकिन अधिकांश समय में, सामग्री अलग-अलग होती है। यदि आप उपरोक्त उदाहरण को मोबाइल पर प्रयोग करें, तो आप देखेंगे कि दूसरे बॉक्स की सामग्री बॉक्स के बाहर दिखाई देती है। यही जगह पर CSS3 Flexbox का उपयोग करना जरूरी है - क्योंकि यह ऑटोमेटिक रूप से बॉक्स को बढ़ाता है ताकि यह सबसे लंबे बॉक्स के बराबर हो।

उदाहरण

Flexbox का उपयोग करके एक फ्लेक्सबॉक्स बनाएं:

Box 1 - यह कुछ पाठ है, ताकि सामग्री वास्तव में बहुत ऊंची लगे। यह कुछ पाठ है, ताकि सामग्री वास्तव में बहुत ऊंची लगे। यह कुछ पाठ है, ताकि सामग्री वास्तव में बहुत ऊंची लगे। यह कुछ पाठ है, ताकि सामग्री वास्तव में बहुत ऊंची लगे। यह कुछ पाठ है, ताकि सामग्री वास्तव में बहुत ऊंची लगे।
Box 2 - मेरी ऊंचाई बॉक्स 1 के अनुसार होगी।

अपने आप साबित करें

Flexbox का एकमात्र समस्या यह है कि यह Internet Explorer 10 या अधिक पुरानी संस्करण में काम नहीं करता। आप करीब में हमारे CSS फ्लेक्सबॉक्स अध्याय में Flexbox लेआउट मॉड्यूल के बारे में अधिक जानकारी प्राप्त करें।

नेविगेशन मेनू

जोड़ें float अधिकारिता सूची के साथ उपयोग करके स्तरीय मेनू बनाएं:

उदाहरण

अपने आप साबित करें

वेब लेआउट उदाहरण

उपयोग करके float प्रतियोगिता पूरा वेब लेआउट भी आम है:

उदाहरण

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

अपने आप साबित करें

और अधिक उदाहरण

बॉर्डर और माउंटिंग वाली इमेज को पैराग्राफ के दाएं फ्लोट करना
इमेज को पैराग्राफ के दाएं फ्लोट करें। इमेज पर बॉर्डर और माउंटिंग जोड़ें।
शीर्षक वाली इमेज दाएं फ्लोट करना
शीर्षक वाली इमेज को दाएं फ्लोट करें।
पैराग्राफ की पहली अक्षर को बाएं फ्लोट करें
पैराग्राफ की पहली अक्षर को बाएं फ्लोट करें और उस अक्षर का स्टाइल सेट करें।
फ्लोटिंग का उपयोग करके एक वेबसाइट बनाएं
फ्लोटिंग का उपयोग करके स्तरीय नेविगेशन बार, हेडर, फुटर, बाएं नेविगेशन बार और मुख्य सामग्री वाला पहला पृष्ठ बनाएं।

सभी CSS फ्लोटिंग प्रतियोगिता

प्रतियोगिता वर्णन
box-sizing एलिमेंट की चौड़ाई और ऊंचाई की गणना तरीका: वे आंतरिक पैडिंग और बॉर्डर को शामिल करने चाहिए कि नहीं।
clear कौन-से इलीमेंट को फ्लोट क्लीयर इलीमेंट के बगल में और किस तरफ फ्लोट करना है।
float इलीमेंट को कैसे फ्लोट करना है।
overflow अधिकतर एलीमेंट के भीतर फ्लोटिंग इलेमेंट के साथ किस तरह की स्थिति होगी यदि सामग्री फ्लोट बॉक्स से बाहर निकले।
overflow-x अधिकतर एलीमेंट के साथ फ्लोटिंग इलेमेंट के बाईं और दाएं के किनारे को कैसे संभालना है।
overflow-y अधिकतर एलीमेंट के साथ फ्लोटिंग इलेमेंट के ऊपर और नीचे के किनारे को कैसे संभालना है।