在HTML页面上并排显示两个图像

Question

我正在尝试并排放置两张相同尺寸的图像。如果我使用table，那么我可以并排显示两个图像。但是在我的CSS样式表中，我使用表格的自定义格式，这也显示在包含图像的页面上。

我想只显示没有任何自定义背景，边框等的图像

我尝试使用div，span，ul＆amp; li（等）但在每种情况下都失败了。

1. 如何在不使用table的情况下将两张图片（相同尺寸）放在一行中？

2. 如果我必须使用table，那么如何使用CSS为我的表格使用两种（或更多种）不同的格式？

Answer 1

你可以这样做：

<style type="text/css">
  .left{float:left;}
</style>

<img class="left" src="path here" />
<img class="left" src="path here" />

Answer 2

使用float:left;你说你发现了一点左边距，所以你可以试试这个

.left{
    float:left;
    margin:0;
    padding:0;
}

这可能是保证金或填充的原因。或者你应该使用身体标签，如

body{margin:0;
padding:0;
}

那么你就不需要写margin:0; padding:0;。

Answer 3

1. 您是否尝试过float:left？
2. 将不同的类附加到每个表，然后在您的css中：

.table_one {
    background-color: #CC0000;
}

.table_two {
    background-color: #00CC00;
}

Answer 4

通常，表是唯一可以在所有情况下使用的方法。根据HTML中两个图像的位置，可能有更好的方法，但这取决于。是否有包含两个图像的元素？该元素的布局属性是什么。

更改表格属性的CSS样式表是一件坏事。一个应该只设置一类表的属性（使用table.className）或特定的表（使用表#id）。如果您无法更改样式表，则必须撤消对特定表格造成的损害。

要做到这一点，找出样式表在您身上发生了哪些属性，并通过为您的表发出CSS规则来更改它们（带有table.className的规则或表#id将覆盖更一般的规则）（可选）或者通过使用内联样式将属性硬编码为HTML（如果您只有一个这样的对，则可以快速修复）。

Answer 5

您可以使用float:left。

HTML：

<div id="row">
    <img class="left" src="" />
    <img class="left" src="" />
</div>

的CSS：

.left{
    width: 250px;
    height: 250px;
    float: left;
}

//If you don't want margins
body{
    margin:0;
    padding:0;
}

Fiddle

Answer 6

这样做：

inline

默认情况下会显示图片<style>img {display: inline;}</style> 。如果没有，请添加：

account year
aaa 2014
bbb 2016
bbb 2016
ddd 2014
ddd 2014
ddd 2015

Answer 7

你基本上做的是将两个图像源标签放在一行代码中。像这样。

<img src="hi"><img src="hey">