div चौड़ाई छोटा होने पर छवियों को रोकें

मेरे पास एक div है जिसमें उल शामिल है और प्रत्येक ली में एक तस्वीर है। मैंने उन्हें सीधी रेखा में लाइन करने के लिए छोड़े गए चित्रों को तैर लिया है, हालांकि एक बार जब यह div के अंत तक पहुंच जाता है, तो यह लपेटता है। मैं चित्रों को दाएं, छिपे हुए पर जारी रखना चाहता हूं, ताकि मैं एक कैरोसेल बनाने में सक्षम हूं। मेरा कोड नीचे है।div चौड़ाई छोटा होने पर छवियों को रोकें

एचटीएमएल

<div id="container"> 
    <div class="lfbtn"></div> 
    <ul id="image_container"> 
     <li class="the_image"> 
      <img src="" /> 
     </li> 
    </ul> 
    <div class="rtbtn"></div> 
</div>

पहले से

सीएसएस

#container { 
    width: 900px; 
    height: 150px; 
    margin: 10px auto; 
} 

#image_container { 
    position: relative; 
    left: 50px; 
    list-style-type: none; 
    width: 700px; 
    height: 110px; 
    overflow: hidden; 

} 

#image_container li { 
    display: inline-block; 
    padding: 7px 5px 7px 5px; 
    float: left; 
} 

.lfbtn { 
    background-image: url(../../img/left.gif); 
    background-repeat: no-repeat; 
    margin: 10px; 
    position: relative; 
    float: left; 
    top: -12px; 
    left: 50px; 
    height: 90px; 
    width: 25px; 
} 

.rtbtn { 
    background-image: url(../../img/right.gif); 
    background-repeat: no-repeat; 
    height: 90px; 
    width: 25px; 
    margin: 10px; 
    position: relative; 
    top: -101px; 
    left: 795px; 
}

धन्यवाद!

स्रोत

2010-03-18 user103219

जब आप इसे समझते हैं तो यह सुनिश्चित करें कि यह आईई और फ़ायरफ़ॉक्स में काम करता है। ऐसा लगता है कि मैं कभी भी सामान नहीं करता ... – Peter

अद्यतन अपनी शैली यह दिखाने के लिए:

<div id="container"> 
    <div class="lfbtn"></div> 
    <div style="width: 700px; overflow: hidden;"> 
     <ul id="image_container" style="width: 1000000px;"> 
      <li class="the_image"> 
       <img src="Untitled-1.gif" /> 
      </li> 
     </ul> 
    </div> 
    <div class="rtbtn"></div> 
    <br style="clear: both;" /> 
</div>

आप एक div कि यूएल, तो उस पर अतिप्रवाह सेट लपेटता पर चौड़ाई सेट करना होगा। अपनी यूएल को कुछ जंगली चौड़ाई रखने के लिए सेट करें ताकि वह कभी भी बहुत सी चीजों के साथ लपेट न सके।

ईमानदार होने के लिए मुझे यकीन नहीं है कि यूएल इसे डीआईवी के समान क्यों नहीं संभालेगा, भले ही यूएल ब्लॉक प्रदर्शित करने के लिए सेट हो। टिप्पणी करने के लिए कोई सीएसएस गुरु देखभाल।

स्रोत

2010-03-18 20:04:28

क्षमा करें लेकिन यह काम नहीं करता है। बस अतिप्रवाह जोड़ना: छुपा; पृष्ठ पर कोई प्रभाव नहीं पड़ा। मैंने इसे #image_container से हटाने का भी प्रयास किया और यह पृष्ठ पर फैली चौड़ाई और छवियों को बनाए रखा। – user103219

मेरा अद्यतन उत्तर देखें –

क्या आप अपना यूआरएल या छवियां पोस्ट कर सकते हैं जिनका आप उपयोग कर रहे हैं। कम से कम अपनी छवियों के आयाम। –

यहाँ यह काम करने के लिए प्राप्त करने के लिए एक काम कर SSCCE न्यूनतम आवश्यक शैलियों के साथ है:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2472979</title> 
     <style> 
      #images { 
       width: 700px; 
       height: 100px; 
       overflow: hidden; 
       white-space: nowrap; 
      } 
      #images li { 
       list-style-type: none; 
       display: inline; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="images"> 
      <ul> 
       <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li> 
       <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li> 
       <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li> 
      </ul> 
     </div> 
    </body> 
</html>

तुम देखो, कुंजी whitespace: nowrap; है। यदि आप इसे एक पूर्ण कैरोसेल बनाना चाहते हैं, तो overflow: hidden;overflow-x: scroll; और overflow-y: hidden; द्वारा प्रतिस्थापित करें।

स्रोत

2010-03-18 21:35:49 BalusC

आप इसे एक उत्तरदायी डिजाइन के साथ काम करने के लिए कैसे प्राप्त करते हैं? दूसरे शब्दों में, मेरी छवियों पर अधिकतम ऊंचाई उपर्युक्त समाधान काम नहीं करती है ... – eeeeaaii

div चौड़ाई छोटा होने पर छवियों को रोकें

उत्तर

संबंधित मुद्दे