सीएसएस - divs क्षैतिज

Question

संरेखित करें मेरे पास एक निश्चित चौड़ाई और ऊंचाई के साथ एक कंटेनर div है, जिसमें ओवरफ्लो: छुपा हुआ है।

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

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

मैं इसे कैसे देखने के लिए चाहते हैं

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

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

Answer 1

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

#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>

Answer 2

इस के करीब लगता है कि आप क्या चाहते हैं:

#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>

Answer 3

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

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

टिप्पणी position: absolute और overflow: hidden आदेश clip प्राप्त करने के लिए की जरूरत काम करने के लिए।

Answer 4

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

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

Answer 5

उन्हें फ़्लोट करें। क्रोम में, कम से कम, आपको LucaM के उदाहरण में, एक रैपर, id="container" रखने की आवश्यकता नहीं है।

Answer 6

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

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

Answer 7

अब आप सीएसएस flexbox का उपयोग क्षैतिज और खड़ी divs संरेखित करने के लिए कर सकते हैं अगर आप की जरूरत है।सामान्य सूत्र इस

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