तो मेरे पास यह बहुत ही सरल HTML पृष्ठ है। मैं चाहता हूं कि एक लंबी पंक्ति में छवियां प्रदर्शित करें। सबसे आसान तरीका क्या है, जो सभी ब्राउज़रों पर काम करेगा?एक पंक्ति में छवियां प्रदर्शित करें (एचटीएमएल)
<html>
<head>
<title>My title</title>
</head>
<body>
<div id="images">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</body>
</html>
यदि आप एक ही पंक्ति होने के लिए #images चाहते हैं, तो आप word wrapping बंद कर सकते हैं।
#images {
white-space: nowrap;
}
यहाँ एक Fiddle
#images {
width: 2000px; /* Increase if needed */
}
#images img {
width: 300px;
height: 200px;
float: left;
}
पर्याप्त div विस्तृत वाली सभी छवियों को संभालने के लिए अपने कंटेनर बनाने है।
मान लें कि आपकी सभी छवियां 300px द्वारा 300px हैं; यदि आपके पास 6 छवियां हैं, तो आपका div 1800px चौड़ा होगा
बस अपनी सभी छवियों को समायोजित करने के लिए कंटेनर div को पर्याप्त चौड़ा बनाएं और वे लपेट नहीं जाएंगे। फिर प्रत्येक छवि बाईं ओर तैरें।
<style>
#images {
width: 1800px;
height: 300px;
}
#images img {
float: left;
}
</style>
मैं भी बहुत कुछ सीएसएस ज्ञान के साथ किसी को शक कर रहा हूँ एक बेहतर तरीका होगा ...
देखो इस jsbin
मुझे लगता है कि यह सबसे आसान तरीका है?
एचटीएमएल :
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpg"></li>
<li><img src="6.jpg"></li>
</ul>
सीएसएस:
ul {
white-space: nowrap;
}
ul, li {
list-style: none;
display: inline;
}
अपडेटेडः कोई लपेटने के लिए नहीं!
इस लपेट होगा। – timgavin