क्या एचटीएमएल में बाल तत्वों को लपेटना बंद करना संभव है?

Question

.container 
{ 
position: absolute; 
bottom: 0px; 
height: 25px; 
left: 200px; 
padding-right: 5px; 
background-color: black; 
overflow: hidden; 
} 


.child 
{ 
position: relative; 
float: left; 
height: 100%; 
width: 95px; 
background-color: #99CCFF; 
margin-left: 5px; 
} 

जब ब्राउज़र ब्राउज़र का आकार छोटा होता है तो सभी बच्चों को रैपिंग के बिना फिट करने की इजाजत मिलती है, मैं एक स्क्रॉलबार बनना चाहता हूं, न कि बाल तत्वों को लपेटने का डिफ़ॉल्ट तंत्र।

मैं बाल तत्वों की संख्या के नियंत्रण में नहीं हूं इसलिए मैं कंटेनर पर चौड़ाई निर्धारित नहीं कर सकता। मैं बाल तत्वों के लपेटने को कैसे रोक सकता हूं?

Answer 1

यदि आप लपेटना नहीं चाहते हैं, तो आपको फ्लोट्स का उपयोग नहीं करना चाहिए - वे विशेष रूप से लपेटने के लिए बनाए गए थे।

overflow:auto और white-space:nowrap और display:inline या inline-block वाले बच्चों के साथ एक मूल कंटेनर का उपयोग करें।

Answer 2

यह सरल HTML और CSS के साथ वास्तव में संभव नहीं है। बाल तत्वों की संख्या जानने के बिना, बाल तत्वों और उनकी कुल चौड़ाई की संख्या के आधार पर जावास्क्रिप्ट का उपयोग करके गतिशील रूप से न्यूनतम-चौड़ाई निर्धारित करना होगा।

Answer 3

आप सभी बच्चों के अभिभावक धारक() जोड़ सकते हैं। और उसके बाद अतिप्रवाह का उपयोग करें: उस div का ऑटो। यदि यह काम नहीं करता है तो div ऊंचाई और चौड़ाई के लिए self.innerHeight और self.innerWidth (जावास्क्रिप्ट के माध्यम से) का भी उपयोग करें।