Html 如何在html的同一行显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39738361/
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
How to display images on same line in html
提问by Feltie
I'm trying to learn some html and I'm not sure what I'm doing wrong. I have 3 images I want to have in the same horizontal line like | img 1 | img 2 | img 3 |. The outer div container im using has enough space to fit all 3 images.
我正在尝试学习一些 html，但我不确定我做错了什么。我想在同一条水平线上有 3 张图像，例如 | 图像 1 | 图像 2 | 图像 3 |。我使用的外部 div 容器有足够的空间来容纳所有 3 个图像。
I've tried using inline-block, inline and float but those don't work.
我试过使用 inline-block、inline 和 float，但这些都不起作用。
Here is what I got:
这是我得到的：
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
回答by Dan Zuzevich
You need to set the inside divs to inline-block, not the outside one.
您需要将内部 div 设置为 inline-block，而不是外部 div。
<div id="banner">
<div class="inline-block">
<img src ="img1.jpg">
</div>
<div class="inline-block">
<img src ="img2.jpg">
</div>
<div class="inline-block">
<img src ="img3.jpg">
</div>
</div>
I removed all of your inline css because it is just bad practice. You should have a separate css file where you define the styles. I used "inline-block" as a class name here, but name it whatever you want.
我删除了您所有的内联 css，因为这只是不好的做法。您应该有一个单独的 css 文件来定义样式。我在这里使用“inline-block”作为类名，但可以随意命名。
In your external css file you would have this, if you kept my naming convention,
在你的外部 css 文件中，如果你保持我的命名约定，你会有这个，
.inline-block {
display: inline-block;
}
Also, heres a working fiddle of another rendition, three images side to side. https://jsfiddle.net/3m33emfd/
此外，这是另一个演绎的工作小提琴，三个图像并排。 https://jsfiddle.net/3m33emfd/
banner does NOT need to be set to inline-block, it is an outside container for your child divs. You would actually want #banner to be display: block, so I put that in my working fiddle.
横幅不需要设置为内联块，它是您的子 div 的外部容器。您实际上希望 #banner 为 display: block，所以我把它放在我的工作小提琴中。
回答by Gowtham
give the following css
给出以下 css
display: flex; justify-content:space-around;
<div id="banner" style="overflow: hidden; display: flex; justify-content:space-around;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>回答by GANI
use display:inline-block;
使用 display:inline-block;
<div id="banner" style="overflow: hidden;justify-content:space-around;">
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img1.jpg">
</div>
<div class="" style="max-width: 100%;max-height: 100%;display: inline-block;">
<img src="img2.jpg">
</div>
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img3.jpg">
</div>
</div>
回答by Ganesh Putta
.image-div{
float:left;
margin-right:10px;
max-width: 20%;
max-height: 20%;
}<div id="banner" style="overflow: hidden; ">
<div class="image-div" >
<img src ="img1.jpg">
</div>
<div class="image-div" >
<img src ="img2.jpg">
</div>
<div class="image-div" >
<img src ="img3.jpg">
</div>
<div style="clear:left;"></div>
</div>回答by cstr_
You have the images enclosed within divtags, which are block elements.
You should instead apply the style directly to the images, and do away with the divs, like this:
您将图像包含在div标签中，标签是块元素。您应该将样式直接应用于图像，并取消 div，如下所示：
<img style="max-width:20%" src="…">
回答by Darshan Prajapati
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Studio </title>
<style>
.image {
display: inline-block;
}
</style>
</head>
<body>
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="image" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
</body>
</html>
