कैसे एक DIV लपेट नहीं करने के लिए?

Question

मुझे एक कंटेनर DIV शैली बनाने की आवश्यकता है जिसमें कई अन्य DIV शामिल हैं। यह पूछा जाता है कि ब्राउज़र विंडो के संकीर्ण होने के लिए इन DIV की लपेट नहीं होगी।

मैंने इसे नीचे की तरह काम करने की कोशिश की।

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

यह ज्यादातर मामलों में काम करता है। हालाँकि, कुछ विशेष मामलों में, रेंडरिंग गलत है। मुझे IE7 के RTL में कंटेनर DIV को 3000px चौड़ाई में बदल दिया गया; और यह गड़बड़ हो जाता है।

क्या कंटेनर बनाने के लिए कोई अन्य तरीका नहीं है कि डाइव न करें?

Comments

मैंने यह टैग जोड़ा: श्वेत-स्थान: नॉरैप; और यह टैग: पाठ-अतिप्रवाह: दीर्घवृत्त; मेरे कोड पर

— कृपाण tabatabaee yazdi

Answer 1

white-space: nowrap;कंटेनर शैली (इसके बजाय overflow: hidden;) का उपयोग करके देखें

Answer 2

अगर मैं एक न्यूनतम चौड़ाई को परिभाषित नहीं करना चाहता, क्योंकि मुझे नहीं पता कि तत्वों की मात्रा केवल एक चीज है जो मेरे लिए काम करती है:

display: inline-block;
white-space: nowrap;

लेकिन केवल क्रोम और सफारी में:

Answer 3

निम्नलिखित ने बिना तैरने के लिए मेरे लिए काम किया (मैंने दृश्य प्रभाव के लिए आपके उदाहरण को थोड़ा संशोधित किया):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

Divs रिक्त स्थान द्वारा अलग किया जा सकता है। आप इस नहीं करना चाहते हैं, का उपयोग margin-right: -4px;करने के बजाय margin: 5px;के लिए .slide(यह बदसूरत है, लेकिन इससे निपटने के लिए एक मुश्किल समस्या है )।

Comments

बहुत बढ़िया जवाब। मैंने नीचे एक समान उदाहरण जोड़ा है, लेकिन आपका देखने के बाद मैंने इसे हटा दिया। यदि आपको IE9 का समर्थन नहीं करना है, तो आप flexbox का उपयोग भी कर सकते हैं: jsfiddle.net/7gsrb38L/1

— ValentinVoilean

</div><!-- --><div class="slide">यदि आप उनके बीच अतिरिक्त रिक्त स्थान को निकालना चाहते हैं तो आप divs के बीच HTML टिप्पणियों का उपयोग कर सकते हैं। इनलाइन-ब्लॉक शैली HTML कोड में स्थान के रूप में आपके कोड में सफेद स्थान को उठाती है।

— जो।

@Jo। पृष्ठ आकार को कम करने के लिए आप कुछ का उपयोग कर सकते हैं जो कि प्रदान नहीं किया जाता है जैसे कि php का उपयोग करते समय: स्रोत कोड के अनुसार </div><?php ?><div class="slide">रेंडर करता </div><div class="slide">है।

— फ़्लुव

इसके अलावा, यदि आप जावास्क्रिप्ट के साथ HTML उत्पन्न करते हैं, तो आप रिक्त स्थान से बच सकते हैं। मैं डॉट कॉम का उपयोग करता हूं । उपरोक्त HTML को इसके साथ प्रतिस्थापित किया जा सकता है:dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")

— JSideris

Answer 4

जिस कॉम्बो की आपको जरूरत है

white-space: nowrap

जनक पर और

display: inline-block; // or inline

बच्चों पर

Answer 5

यह मेरे लिए काम किया:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

यह अतिप्रवाह के साथ: छिपा हुआ मेरे लिए एक इलाज का काम करता है। धन्यवाद।

— अल्फी

Answer 6

overflow: hiddenआपको सही व्यवहार देना चाहिए। मेरा अनुमान है कि RTLगड़बड़ है क्योंकि आपके पास float: leftएनकैप्सुलेटेड divएस है।

उस बग के पास, आपको सही व्यवहार मिला।

Comments

मैं जाँच करूंगा कि क्या यह "फ्लोट: लेफ्ट" की वजह से है। लेकिन, समान कोड फ़ायरफ़ॉक्स और सफारी पर ठीक काम करता है, न कि केवल IE पर। इसलिए, मुझे वास्तव में संदेह है कि यह मामला है।

— मॉर्गन चेंग

Answer 7

width: 3000px;IE के मामले के लिए उपयोग करने का प्रयास करें ।

Answer 8

उपरोक्त में से किसी ने भी मेरे लिए काम नहीं किया।

मेरे मामले में, मुझे अपने द्वारा बनाए गए उपयोगकर्ता नियंत्रण में निम्नलिखित जोड़ना होगा:

display:inline-block;

Answer 9

min-widthसंपत्ति को सही ढंग से इंटरनेट एक्सप्लोरर, जो सबसे अधिक संभावना अपनी समस्याओं का कारण है में काम नहीं करता।

जानकारी और एक शानदार स्क्रिप्ट पढ़ें जो कई IE CSS समस्याओं को ठीक करता है ।

Answer 10

आप उपयोग कर सकते हैं

display: table;

अपने कंटेनर और उसके बाद से बचने के लिए overflow: hidden;। यह काम करना चाहिए अगर आप इसे सिर्फ युद्ध के उद्देश्य के लिए इस्तेमाल करते हैं।

Answer 11

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

Answer 12

का उपयोग करें display:flexऔरwhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

Answer 13

<span>टैग एक दस्तावेज़ में समूह इनलाइन तत्वों के लिए प्रयोग किया जाता है।
(स्रोत)

Comments

हालांकि यह सच है, यह सवाल का जवाब नहीं देता है।

— क्वेंटिन

यह पूरी तरह से प्रश्न को संबोधित करता है क्योंकि स्पैन और डिविवरिंग में समान हैं सिवाय इसके कि डिव लपेटा हुआ है और स्पैन नहीं है। और आप जो भी वर्कअराउंड चाहते हैं, उसे लागू कर सकते हैं।

— माइक

क्या इसका मतलब यह है कि आपका सुझाव "divs के बजाय spans का उपयोग करें" है? क्योंकि आपने ऐसा नहीं कहा है।

— क्वेंटिन