ओवरफ्लो-एक्स

Question

के साथ क्षैतिज स्क्रॉलिंग मैं सोच रहा था कि div को छवियों के अनुसार क्षैतिज रूप से खींचने और स्क्रॉल करने के लिए अभी भी कोई अच्छा तरीका नहीं है। आखिरकार, यह 2011 है!

mega-width चाल करता है, लेकिन छवियों से भरे हुए mega-space खाली छोड़ देता है।
यदि बहुत अधिक भरा हुआ है, तो छवियां प्रदर्शित नहीं होती हैं। JQuery के लिए वही। गुगलिंग के घंटों के बाद नीचे दी गई स्थिति सबसे अच्छी है, लेकिन यह पर्याप्त विश्वसनीय नहीं है।

आपके समय के लिए धन्यवाद।

---

* { 
    margin:0; 
    padding:0; 
} 

#one { 
    width: 200px;  
    height: 250px; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

#two { 
    width: 10000em; 
} 

#two img { 
    float: left; 
} 

$(document).ready(function() { 
    var total = 0; 
    $(".calc").each(function() { 
    total += $(this).outerWidth(true); 
    }); 
    $("#two").css('width', total); 
    alert(total); 
}); 

<div id="one"> 
    <div id="two"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    </div> 
</div> 

Answer 1

यह आसान है। छवियों पर display:inline-block और माता-पिता पर white-space:nowrap।

संपादित करें: मैं भूल गया कि छवियां डिफ़ॉल्ट इनलाइन से हैं, वैसे भी :) इसका मतलब है कि white-space:nowrap आपको बस चाहिए।

div { 
    overflow-x:scroll; 
    overflow-y:hidden; 
    white-space:nowrap; 
} 

लाइव डेमो:http://jsfiddle.net/U4RsQ/2/

Answer 2

Make CSS Div Width Equal To Contents देखें, मुझे लगता है कि खींच लिए। फिर सुपर-विशाल नहीं होने के लिए चौड़ाई को बाधित करने के लिए max-width लागू करें। (और overflow: scroll यदि आवश्यक हो।)

Answer 3

क्या IE8 के साथ मेरे लिए काम किया:

msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

आप निम्नलिखित मेटा शामिल करके सुनिश्चित कर सकते हैं नवीनतम प्रतिपादन के साथ अपने पृष्ठ प्रदर्शित करता है अपने पृष्ठ के मुख्य भाग में टैग करें:

<meta http-equiv="X-UA-Compatible" content="IE=9" />