Reputation: 13890
I have this:
<html>
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<style type='text/css'>
body {
background-color: #000;
}
</style>
</head>
<body>
<img src="1.jpg" height="100%" style="float: left;" />
<img src="2.jpg" height="100%" style="float: left;" />
<img src="3.jpg" height="100%" style="float: left;" />
<img src="4.jpg" height="100%" style="float: left;" />
</body>
</html>
This is big images. But my browser show me two images side by side and next in a new line. I want to disply it all in one line. How to do it?
Upvotes: 0
Views: 85
Reputation: 17732
Apply clear: left
to your images as well.
<img src="1.jpg" height="100%" style="float: left;" />
Upvotes: 0
Reputation: 434965
Stop floating the images and set white-space: nowrap
on the body or some other wrapper element.
body {
white-space: nowrap;
}
and:
<body>
<img src="1.jpg" height="100%" />
<img src="2.jpg" height="100%" />
<img src="3.jpg" height="100%" />
<img src="4.jpg" height="100%" />
</body>
Demo: http://jsfiddle.net/ambiguous/4Udam/
Upvotes: 2
Reputation: 1732
Just set really big value to body width:
body {
width:5000px;
}
But this will introduce horizontal scrolling, you should know, that people hate to scroll horizontally. Why do you not use some kind of lightbox effect?
Upvotes: 1