连续显示图像 (HTML)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18678046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display images in a row (HTML)
提问by user2757799
So I have this very simple HTML page. All I want is to display images in one long row. What is the simplest way, that would work on all browsers?
所以我有这个非常简单的 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>
采纳答案by Austin Brunkhorst
If you want #imagesto be a single row, you can turn off word wrapping.
如果你想#images成为单行，你可以关闭自动换行。
#images {
white-space: nowrap;
}
回答by Black Sheep
Look this jsbin
看看这个jsbin
I think this is the simplest way:
我认为这是最简单的方法：
HTML:
HTML：
<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>
CSS:
CSS：
ul {
white-space: nowrap;
}
ul, li {
list-style: none;
display: inline;
}
Updated: For no wrap!
更新：没有包装！
回答by timgavin
Make your container divwide enough to handle all of your images.
使您的容器div足够宽以处理所有图像。
Let's say all your images are 300px by 300px;. if you have 6 images, your div would be 1800px wide
假设您所有的图像都是 300 像素 x 300 像素；。如果你有 6 张图片，你的 div 将是 1800px 宽
Just make the container div wide enough to accommodate all of your images and they won't wrap. Then float each image left.
只需使容器 div 足够宽以容纳您的所有图像，它们就不会环绕。然后向左浮动每个图像。
<style>
#images {
width: 1800px;
height: 300px;
}
#images img {
float: left;
}
</style>
I'm suspecting somebody with much more CSS knowledge will have a better way?...
我怀疑有更多 CSS 知识的人会有更好的方法吗？...
回答by Grigory Kislin
With bootstrap:
使用引导程序：
<div class="row">
<div class="column">
<img src="1.jpg">
</div>
<div class="column">
<img src="2.jpg">
</div>
...
</div>
See How To Place Images Side by Side
查看如何并排放置图像
