स्पैन या डिव के रैपिंग को रोकें

Question

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

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

मैंने उन्हें एक कंटेनर में तैरने की कोशिश की है और फिर white-space: nowrapकंटेनर पर एक शैली डाल रहा है , लेकिन अफसोस, यह अभी भी लपेटता है।

विचार?

ऐसा लग रहा था:

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

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

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; }( जब आप इसे पढ़ते हैं तो कौन से ब्राउज़र समर्थन कर सकते हैं या नहीं ), और आपको इस कंटेनर के बजाय विंडो पर स्क्रॉलबार मिलेगा।

यहाँ कुंजी है display: inline-block। आजकल इसका अच्छा क्रॉस-ब्राउज़र समर्थन है, लेकिन हमेशा की तरह, यह सुनिश्चित करने के लिए सभी लक्ष्य ब्राउज़रों में परीक्षण के लायक है।

Comments

वास्तव में, मैंने अपनी पूरी प्रस्तुति से इस अलग करने की कोशिश की और यह अपेक्षाकृत अच्छी तरह से काम करने के लिए लग रहा था (कम से कम फ़ायरफ़ॉक्स 3, आईई 7, क्रोम और ओपेरा में, जो मुझे बहुत परवाह है)

— सीजीपी

बस white-space:normalनिहित तत्वों white-space:nowrapपर और माता-पिता पर सेटिंग ने मेरे लिए चाल चली। बहुत बहुत धन्यवाद!

— Noitidart

सफेद-स्थान: सामान्य डिफ़ॉल्ट मान है, भले ही आप इसे सेट न करें, यह ठीक है।

— पार्थ

@Parth white-space: normalMUST को इस मामले में बच्चों पर सेट किया जाना चाहिए, क्योंकि उनकी डिफ़ॉल्ट white-spaceपहले से ही माता-पिता द्वारा ओवरराइड हो गई थी nowrap।

— गुलेरिया

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

overflow: scroll;

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

overflow: auto;

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

Answer 5

लगता है कि विभा अपने शरीर की चौड़ाई से बाहर नहीं जाएंगी। यहां तक ​​कि एक और 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 के माध्यम से लोड किया जा सकता है, क्योंकि यह एक और पेज है और इसकी सामग्री बहुत व्यापक हो सकती है।

Comments

अतिप्रवाह-एक्स या स्क्रॉल-एक्स, मुझे यह याद नहीं है कि यह कौन सा है। आज आलसी है।

— केंट फ्रेड्रिक