दो तत्व इनलाइन ब्लॉक -

Question

का आकार बदलने पर कोई प्रवाह नहीं है, मैं इनलाइन-ब्लॉक का उपयोग करके एकाधिक कॉलम रखने का सबसे अच्छा तरीका ढूंढ रहा हूं। ब्राउजर का आकार बदलने के अलावा सबकुछ बढ़िया काम करता है। दूसरे कॉलम को पहले कॉलम के नीचे धक्का दिया जाएगा क्योंकि एक इनलाइन-ब्लॉक के साथ अपेक्षा करेगा। मैं समझता हूं कि ऐसा क्यों होता है, मुझे यह जानने की ज़रूरत है कि दूसरे कॉलम को दबाए रखने के बजाय क्षैतिज स्क्रॉल करने का कोई तरीका है या नहीं। मैंने सोचा था: छुपा काम करेगा, लेकिन ऐसा प्रतीत नहीं होता है।

मैं अभी किसी भी चौड़ाई की स्थापना नहीं कर रहा हूँ और संभव के रूप में इस के रूप में तरल पदार्थ रखने के लिए करना चाहते हैं।

<div> 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

col1 और col2 कोई चौड़ाई सेट के साथ इनलाइन-ब्लॉक हैं और जब ब्राउज़र दृश्य पर्याप्त विस्तृत होता है तो वे एक तरफ प्रदर्शित होते हैं। जब उपयोगकर्ता ब्राउज़र को छोटा आकार दिया जाता है, तो col1 के नीचे col2 प्रदर्शित करता है। मैं चाहता हूं कि वे हमेशा एक तरफ रहें और यदि आवश्यक हो तो क्षैतिज स्क्रॉल करें।

Answer 1

तत्वों कि display: inline-block की मूल के white-space: nowrap जोड़ें।

Answer 2

<div style="width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

या

<div style="min-width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

Answer 3

आप बाहरी div को min-width स्थापित करने की कोशिश कर सकते प्रयास करें। तो यह तब लागू होता है जब खिड़की छोटी होती है, और वास्तविक आकार को ठीक नहीं करती है।