कंटेनरों (अवधि या div) को लपेटना रोकें

Question

मैं निश्चित चौड़ाई के div तत्वों को एक कंटेनर में रखना चाहता हूं और क्षैतिज स्क्रॉल बार प्रकट होता है। Div/span तत्वों को एक पंक्ति में दिखाई देना चाहिए, जो एचटीएमएल में दिखाई देने के क्रम में बाएं से दाएं हैं। (अनिवार्य रूप से अनचाहे)

इस तरह क्षैतिज स्क्रॉल बार दिखाई देगा और सामग्री (बाएं से दाएं) के माध्यम से पढ़ने के लिए लंबवत स्क्रॉल बार के बजाय उपयोग किया जा सकता है।

मैंने उन्हें एक कंटेनर में तैरने की कोशिश की है और फिर कंटेनर पर "सफेद-स्थान: अब्रैप" शैली डाली है, लेकिन हां, यह अभी भी लपेटता प्रतीत होता है। विचार?

यह इस तरह देखा:

.slideContainer { 
 
    white-space: nowrap; 
 
} 
 
.slide { 
 
    width: 800px; 
 
    float: left; 
 
    display: inline; 
 
}

<div class="slideContainer"> 
 
    <div class="slide">Some content</div> 
 
    <div class="slide">More content</div> 
 
    <div class="slide">Even More content!</div> 
 
</div>

अद्यतन: उदाहरण के लिए site देखें, लेकिन वे एक और तरीका नहीं होने के बारे गलत थे - मुझे यकीन है कि लेख हालांकि पुराना है हूँ।

Answer 1

इस प्रयास करें:

.slideContainer { 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
} 
 
.slide { 
 
    display: inline-block; 
 
    width: 600px; 
 
    white-space: normal; 
 
}

<div class="slideContainer"> 
 
    <span class="slide">Some content</span> 
 
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
 
    <span class="slide">Even more content!</span> 
 
</div>

ध्यान दें कि आप .slideContainer { overflow-x: scroll; } छोड़ सकते हैं (आप यह पढ़ जब जो browsers may or may not support), और आप खिड़की पर बजाय इस कंटेनर पर एक स्क्रॉलबार मिलेगा ।

यहां कुंजी display: inline-block है। आजकल decent cross-browser support है, लेकिन सामान्य रूप से, यह सुनिश्चित करने के लिए सभी लक्षित ब्राउज़रों में परीक्षण के लायक है।

Answer 2

ऐसा लगता है कि divs उनके शरीर की चौड़ाई के बाहर नहीं जाएंगे। एक और div के भीतर भी।

मैंने इसे परीक्षण करने के लिए फेंक दिया (हालांकि एक डॉक्टरेट के बिना) और यह विचार के रूप में काम नहीं करता है।

.slideContainer { 
 
    overflow-x: scroll; 
 
} 
 
.slide { 
 
    float: left; 
 
}

<div class="slideContainer"> 
 
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div> 
 
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div> 
 
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div> 
 
</div>

क्या मैं सोच रहा हूँ, के बाद से है कि एक और पेज है और इसकी सामग्री बहुत व्यापक हो सकता है कि भीतरी div के एक iFrame के माध्यम से लोड किया जा सकता है।

overflow: scroll; 

आप केवल आवश्यक हो, आप "ऑटो" विकल्प का उपयोग कर सकते हैं जब स्क्रॉल पट्टी प्रदर्शित करना चाहते हैं:

overflow: auto; 

मुझे नहीं लगता कि

Answer 3

के रूप में आप उपयोग कर सकते हैं उल्लेख किया आपको "फ्लोट" संपत्ति का उपयोग "ओवरफ्लो" के साथ करना चाहिए, लेकिन मुझे पहले अपना उदाहरण आजमाने की ज़रूरत है।

Answer 4

यह सिर्फ इस के साथ काम करता है:

.slideContainer { 
    white-space: nowrap; 
} 
.slide { 
    display: inline-block; 
    width: 600px; 
    white-space: normal; 
} 

मैंने किया था मूल रूप से float : left; है और वह सही ढंग से काम करने से यह रोका।

इस समाधान को पोस्ट करने के लिए धन्यवाद।

Answer 5

विशेष रूप से ट्विटर का उपयोग करते समय ट्विटर के Bootstrap, white-space: nowrap; किसी बच्चे को पैडिंग या मार्जिन लागू करते समय सीएसएस में हमेशा काम नहीं करता है div। इसके बजाए, पैडिंग/मार्जिन के स्थान पर समकक्ष border: 20px solid transparent; शैली जोड़ना अधिक लगातार काम करता है।