मैं फोटो की एक श्रृंखला के साथ <div> बनाने की कोशिश कर रहा हूं जो केवल क्षैतिज स्क्रॉल करने योग्य हैं।सीएसएस क्षैतिज स्क्रॉल
यह कुछ LINK जैसा दिखना चाहिए;
हालांकि उपरोक्त केवल <div> के लिए चौड़ाई निर्दिष्ट करके प्राप्त किया गया है जिसमें फ़ोटो शामिल हैं (इसलिए वे 'शब्द-लपेट' नहीं हैं)। अगर मैं चौड़ाई नहीं डालता - ऐसा लगता है; LINK
छवियों में भिन्नता के रूप में एक निश्चित चौड़ाई डालने से रोकने के लिए मैं सीएसएस का उपयोग कर क्या कर सकता हूं।
धन्यवाद
आप white-space:nowrap साथ display:inline-block उपयोग कर सकते हैं। इस तरह लिखें:
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 50px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
}
चेक इस http://jsfiddle.net/YbrX3/
जांच के लिए इस लिंक यहाँ मैं प्रदर्शन में कोई परिवर्तन: इनलाइन-ब्लॉक http://cssdesk.com/gUGBH
हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन यहां उत्तर के आवश्यक हिस्सों को शामिल करना बेहतर है और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक किए गए पृष्ठ में परिवर्तन होने पर लिंक-केवल उत्तर अमान्य हो सकते हैं। –
उपयोग इस कोड को क्षैतिज स्क्रॉल ब्लॉक सामग्री उत्पन्न करने के लिए। मुझे यह http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
तालिका संरचना का उपयोग करने का प्रयास करें, यह अधिक वापस संगत है। चेक इस बाहर Horizontal Scrolling using Tables
यह वास्तव में अच्छी तरह से काम करता है - धन्यवाद –
@sandeep plz मेरी मदद बाहर मैं उर सीएसएस जो jsfiddle में है का इस्तेमाल किया और ajax callin जो बटन जो अब कैसे पाद लेख में है में संग्रहीत किया जाता है द्वारा गतिशील रूप से कुछ डेटा आर cuming लगता है मैं उस बटन को स्क्रॉल कर सकता हूं न कि विंडो पेज केवल फूटर –
छवि को हथियाने और बाएं/दाएं खींचकर स्क्रॉलिंग का समर्थन कैसे करें? –