在 HTML 页面上并排显示两个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2839318/
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 two images side by side on an HTML Page
提问by LalitBarik
I am trying to place two images of the same size side-by-side. If I use a tablethen I am able to display both images side-by-side. But in my CSS Stylesheet I am using a custom format for the table and this shows on the page containing the images, too.
我试图并排放置两个相同大小的图像。如果我使用 atable那么我可以并排显示两个图像。但是在我的 CSS 样式表中，我为表格使用了自定义格式，这也显示在包含图像的页面上。
I want to just display both images without any custom background, border, etc.
我只想显示没有任何自定义背景、边框等的两个图像。
I tried using div, span, ul& li(etc.) but failed in each case.
我尝试使用div, span, ul& li（等）但在每种情况下都失败了。
How can I place two images (of the same size) in a single line, without using a
table?If I have to use
tablefor the same, then how can I use two (or more) different formats for my tables using CSS?
如何在一行中放置两个图像（相同大小），而不使用
table?如果我必须使用
table相同的格式，那么如何使用 CSS 为我的表格使用两种（或更多）不同的格式？
回答by Sarfraz
You can do like:
你可以这样做：
<style type="text/css">
.left{float:left;}
</style>
<img class="left" src="path here" />
<img class="left" src="path here" />
回答by Kali Charan Rajput
Use float:left;you say that you are finding a little left margin so you can try this
用float:left;你说你找到了一点左边距，所以你可以试试这个
.left{
float:left;
margin:0;
padding:0;
}
this may be cause of margin or padding. or you should use body tag like
这可能是边距或填充的原因。或者你应该使用 body 标签
body{margin:0;
padding:0;
}
then you have no need for write margin:0; padding:0;.
那么你就不需要 write 了margin:0; padding:0;。
回答by nc3b
- Have you tried
float:left? - Attach a different class to every table and then in your css:
- 你试过
float:left吗？ - 将不同的类附加到每个表，然后在您的 css 中：
.table_one {
background-color: #CC0000;
}
.table_two {
background-color: #00CC00;
}
回答by Maarten Peels
回答by JoostS
Just do this:
只需这样做：
<img src="path/image.ext" /><img src="path/image.ext" />
It will display the images inlineby default. If not, add:
它将inline默认显示图像。如果没有，请添加：
<style>img {display: inline;}</style>
回答by buti-oxa
Generally, table is the only way that will work in all situations. Depending on where the two images are in you HTML, there may be a better way, but that depends. Is there an element that contains the two images already? What are that element's layout properties.
通常，表格是唯一适用于所有情况的方法。根据两个图像在 HTML 中的位置，可能有更好的方法，但这取决于。是否已经有包含这两个图像的元素？该元素的布局属性是什么。
CSS stylesheet that changes properties of a table is a bad bad thing. One should only set properties of a class of tables (using table.className) or a particular table (using table#id). If you cannot change the stylesheet, you have to undo the damage it does to your particular table.
改变表格属性的 CSS 样式表是一件坏事。应该只设置一类表（使用 table.className）或特定表（使用 table#id）的属性。如果您无法更改样式表，则必须消除它对您的特定表造成的损坏。
To do that, find out what properties the stylesheet changed on you, and change them back by issueing a CSS rule for your table (rule with table.className or table#id will override a more general rule) (preferrable) or by hard-coding the property into HTML using inline styles (fine for a quick fix if you only have one such pair).
为此，找出样式表更改了您的哪些属性，然后通过为您的表格发布 CSS 规则（带有 table.className 或 table#id 的规则将覆盖更一般的规则）（首选）或通过硬 -使用内联样式将属性编码为 HTML（如果您只有这样的一对，则可以快速修复）。
回答by Jake
What you basically do is your put the two image source tags right next to each other in one line of code. Like this.
你基本上做的是将两个图像源标签放在一行代码中。像这样。
<img src="hi"><img src="hey">
