CSS - divs को क्षैतिज रूप से संरेखित करें

Question 1

मेरे पास एक निश्चित widthऔर height, के साथ एक कंटेनर div है overflow: hidden।

मैं फ्लोट की एक क्षैतिज पंक्ति चाहता हूं: इस कंटेनर के भीतर बाएं डिव। तलाक जो बाईं ओर तैरते हैं वे स्वाभाविक रूप से अपने माता-पिता के दाहिने हिस्से को पढ़ने के बाद नीचे 'लाइन' पर धक्का देंगे। यह तब भी होगा heightजब माता-पिता को इसकी अनुमति नहीं देनी चाहिए। यह इस तरह दिखता है:

[गलत] [1] - हटा दी गई छवि झोंपड़ी छवि जिसे एक विज्ञापन द्वारा बदल दिया गया था

मैं इसे कैसे देखना चाहूंगा:

[सही] [2] - एक विज्ञापन द्वारा प्रतिस्थापित की गई छवि झोंपड़ी हटा दी गई है

नोट: मैं जो प्रभाव चाहता हूं उसे इनलाइन एलिमेंट्स & का उपयोग करके प्राप्त किया जा सकता है white-space: no-wrap(यानी मैंने इसे इमेज में दिखाया है)। हालांकि, यह मेरे लिए अच्छा नहीं है (यहाँ समझाने के लिए बहुत लंबा कारण है), क्योंकि बच्चे के डिवीजनों को ब्लॉक किए गए तत्वों को फ्लोट करने की आवश्यकता होती है।

Question 2

आप कंटेनर में एक आंतरिक div डाल सकते हैं जो सभी फ्लोट किए गए div को पकड़ने के लिए पर्याप्त चौड़ी है।

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

स्निपेट का विस्तार करें

Question 3

style="overflow:hidden"माता div- पिता के लिए और style="float: left"सभी बच्चों के लिए IE7 और नीचे जैसे पुराने ब्राउज़रों के लिए क्षैतिज रूप divsसे divsसंरेखित करना महत्वपूर्ण है ।

आधुनिक ब्राउज़रों के लिए, आप style="display: table-cell"सभी बच्चे के लिए उपयोग कर सकते हैं divsऔर यह क्षैतिज रूप से ठीक से प्रस्तुत करेगा।

Question 4

यह वही है जो आप चाहते हैं:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

स्निपेट का विस्तार करें

Question 5

आप clipसंपत्ति का उपयोग कर सकते हैं:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

नोट करें position: absoluteऔर काम overflow: hiddenकरने के लिए आवश्यक है clip।

Question 6

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

यह नोट करना महत्वपूर्ण है कि कंटेनर को लपेटना नहीं चाहिए यदि तत्व क्षैतिज रूप से प्रदर्शित हों: white-space: nowrap

Question 7

यदि आप की जरूरत है तो आप अब क्षैतिज और लंबवत रूप से संरेखित करने के लिए सीएसएस फ्लेक्सबॉक्स का उपयोग कर सकते हैं। सामान्य सूत्र इस प्रकार है

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}

Question 8

उन्हें तैरता छोड़ दिया। क्रोम में, कम से कम, आपको एक रैपर की जरूरत नहीं है id="container", लुका के उदाहरण में।

Question 9

आप ऐसा कुछ कर सकते हैं:

#container {
  background-color: red;
  width: 200px;
}

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

स्निपेट का विस्तार करें