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

Question

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

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

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

1. 如何在不使用table情况下将两个图像（相同大小）放在一行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; 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或table #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;
}

小提琴

Answer 6

这样做：

<img src="path/image.ext" /><img src="path/image.ext" />

它默认显示inline图像。 如果没有，请添加：

<style>img {display: inline;}</style>

Answer 7

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

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